javascript - Highcharts bar and line issue -
i using highcharts create bar , line chart show difference between budget , actual
the issue getting when make spline chart bar points don't seem have relevance should be. feb, budget 20.9 bar showing above 30.
all bars (columns) seem way high should though in tooltip showing correct data
http://jsfiddle.net/ktcle/kslgl/
$(function () { $('#container').highcharts({ chart: { zoomtype: 'xy' }, title: { text: null }, xaxis: [{ categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'] }], yaxis: [{ // primary yaxis labels: { format: '{value}£m', style: { color: '#666666' } }, title: { text: null, style: { color: '#45c2c5' } } }, { // secondary yaxis title: { text: 'budget', text: null }, labels: { enabled: false }, opposite: true, }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalalign: 'top', y: 170, floating: true, backgroundcolor: '#ffffff' }, series: [{ name: 'budget', color: '#4a3950', type: 'column', yaxis: 1, data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5], tooltip: { valuesuffix: '£' } }, { name: 'actual', color: '#45c2c5', type: 'spline', data: [24.5, 22.5, 30 ], tooltip: { valuesuffix: '£' }, marker: { linewidth: 2, linecolor: highcharts.getoptions().colors[3], fillcolor: 'white' } }] }); });
because have 2 y axis, remove second y axis , in series remove property yaxis: 1 or changing yaxis: 0
$(function () { $('#container').highcharts({ chart: { zoomtype: 'xy' }, title: { text: null }, xaxis: [{ categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'] }], yaxis: [{ // primary yaxis labels: { format: '{value}£m', style: { color: '#666666' } }, title: { text: null, style: { color: '#45c2c5' } } }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalalign: 'top', y: 170, floating: true, backgroundcolor: '#ffffff' }, series: [{ name: 'budget', color: '#4a3950', type: 'column', yaxis: 0, data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5], tooltip: { valuesuffix: '£' } }, { name: 'actual', color: '#45c2c5', type: 'spline', data: [24.5, 22.5, 30 ], tooltip: { valuesuffix: '£' }, marker: { linewidth: 2, linecolor: highcharts.getoptions().colors[3], fillcolor: 'white' } }] }); });
Comments
Post a Comment