i have combo highchart not rendered correctly, code using:
<script type="text/javascript"> $(document).ready(function () { scurvechart = new highcharts.chart({ chart: { events: { load: function () { var label = this.renderer.label('details company b') .css({ width: '450px', color: '#666666', fontsize: '16px' }) .attr({ 'padding': 10 }) .add(); label.align(highcharts.extend(label.getbbox(), { align: 'left', x: 50, verticalalign: 'top', y: 5 }), null, 'spacingbox'); } }, bordercolor: '#bbbbbb', borderwidth: 1, plotshadow: true, renderto: 'scurvechart_container', zoomtype: 'xy' }, exporting: { enabled: false }, credits: { enabled: false }, legend: { align: 'left', backgroundcolor: '#ffffff', floating: true, layout: 'vertical', verticalalign: 'top', x: 120, y: 100, itemstyle: { color: '#666666', fontweight: 'bold', fontsize: '10px', font: 'trebuchet ms, verdana, sans-serif' } }, title: { text: '' }, tooltip: { shared: true }, plotoptions: { series: { allowpointselect: true, cursor: 'pointer', datalabels: { enabled: false }, events: { //click: chartclick }, showinlegend: false, stacking: 'normal' } }, xaxis: { labels: { formatter: function () { return this.value; }, style: { color: '#4572a7' }, style: {font: '9px trebuchet ms, verdana, sans-serif'} }, categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17'] }, yaxis: [ { min: 0, labels: { formatter: function () { return this.value; }, style: { color: '#4572a7' }, style: {font: '9px trebuchet ms, verdana, sans-serif'} }, opposite: true, title: { style: { font: '10px trebuchet ms, verdana, sans-serif' }, text: 'overall activities' } }, { labels: { formatter: function () { return this.value; }, style: { color: '#89a54e' }, style: {font: '9px trebuchet ms, verdana, sans-serif'} }, title: { style: { font: '10px trebuchet ms, verdana, sans-serif' }, text: 'weekly activities' } }], series: [ { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'target', type: 'column', yaxis: 1, color: '#6699cc' }, { data: [], name: 'actual', type: 'column', yaxis: 1, color: '#fac090' }, { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'actual acc', type: 'spline', color: '#ff0000' }, { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'target acc', type: 'spline', color: '#376092' } ] }); }); if see compare chart against 1 created in excel can see issue, https://www.dropbox.com/s/8lrk0vtgwitbdb4/chart-screenshot-in-excel.jpg?dl=0
with highchart rendered chart: https://www.dropbox.com/s/c1ga0x3vxa8sbol/highchart-screenshot.jpg?dl=0
as can see line charts wrong should close each other.
any appreciated.
the problem code setting highchart has enabled stacking setting stacking attribute 'normal'.
{..., plotoptions: { series: {..., showinlegend: false, stacking: 'normal'}}, ...} you can disable stacking removing stacking attribute. example...
{..., plotoptions: { series: {..., showinlegend: false}}, ...} or can disable stacking setting stacking attribute null. example...
{..., plotoptions: { series: {..., showinlegend: false, stacking: null}}, ...} 
Comments
Post a Comment