Getting StartedPerformance !!!Chart DataBar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates how to specify chart global alpha. The globalAlpha attribute
specifies the transparency of the chart. It can be a number between 0 and 1.
0=full transparency, 1=no transparency. For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Global Alpha Example - JavaScript Chart by DataViz Charts </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.chart.css" /> <link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" /> <script src="../../js/dataviz.chart.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' }] }; var fillStyle1 = { type: 'radialGradient', x0: 0.35, y0: 0.35, r0: 0.0, x1: 0.35, y1: 0.35, r1: 1, colorStops: [{ offset: 0, color: 'white' }, { offset: 1, color: '#418CF0' }] }; var fillStyle2 = { type: 'radialGradient', x0: 0.35, y0: 0.35, r0: 0.0, x1: 0.35, y1: 0.35, r1: 1, colorStops: [{ offset: 0, color: 'white' }, { offset: 1, color: '#FCB441' }] }; var chart = new DataViz.Chart({ title: { text: 'Global Alpha' }, border: { strokeStyle: '#6ba851' }, background: background, globalAlpha: 0.5, series: [ { type: 'bubble', title: 'Series 1', data: [[1, 15, 8], [2, 18, 4], [3, 15, 8], [4, 16, 13], [5, 14, 11]], fillStyle: fillStyle1 }, { type: 'bubble', title: 'Series 2', data: [[1, 9, 15], [2, 8, 24], [3, 12, 10], [4, 9, 14], [5, 7, 12]], fillStyle: fillStyle2 } ] }); chart.write('container'); </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"> </div> </div> </body> </html> |