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 assign an axis to specific series. You can add an
unlimited number of x and y axes. To assign an axis to specific chart series just
set a "name" option to the axis and set a "axisX" or "axisY" option to the series
with the same name.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Assigning Axis 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 chart = new DataViz.Chart({ title: { text: 'Assigning Axis' }, animation: { duration: 1 }, axes: [ { name: 'y1', location: 'left' }, { name: 'y2', location: 'right', strokeStyle: '#FCB441', majorGridLines: { strokeStyle: '#FCB441' }, majorTickMarks: { strokeStyle: '#FCB441' } } ], series: [ { type: 'column', axisY: 'y1', data: [['A', 1], ['B', 4], ['C', 3], ['D', 5], ['E', 2], ['F', 1]] }, { type: 'line', axisY: 'y2', data: [['A', 40], ['B', 60], ['C', 62], ['D', 52], ['E', 70], ['F', 75]] } ] }); chart.write('container'); </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"> </div> </div> </body> </html> |