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

jsfiddle

$(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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -