when click on district shows villages on drilldown when drillup shows xaxis data along labels drilldown i.e. village name district name. wish display district names on drillup , villages name on drilldown. can hide xaxis series showing 1, 2 ,3 ,4 ,5 if there no more district name. here fiddle - http://jsfiddle.net/prachi_chandra/3e4lnctm/3/
i appreciate if me fix this. in advance.
$(function() { highcharts.setoptions({ lang: { drilluptext: '? main' } }); // create chart var defaulttitle = "population district wise"; var drilldowntitle = "population village wise - district: "; // create chart var chart = new highcharts.chart({ chart: { height: 320, type: 'column', renderto: 'chart_div1', events: { drilldown: function(e) { chart.settitle({ text: drilldowntitle + e.point.name }); }, drillup: function(e) { chart.settitle({ text: defaulttitle }); } } }, title: { text: defaulttitle, align: 'center', y: 5, style: { fontsize: '12px', fontweight: 'bold', fontfamily: 'verdana, sans-serif' } }, credits: { enabled: false }, scrollbar: { enabled: true }, scrollbar: { enabled: true, barbackgroundcolor: 'gray', barborderradius: 7, barborderwidth: 0, buttonbackgroundcolor: 'gray', buttonborderwidth: 0, buttonarrowcolor: 'yellow', buttonborderradius: 7, riflecolor: 'yellow', trackbackgroundcolor: 'white', trackborderwidth: 1, trackbordercolor: 'silver', trackborderradius: 7 }, xaxis: { min: 0, max: 5, type: 'category' }, yaxis: [{ //--- primary yaxis title: { text: 'population' } }], legend: { enabled: false }, plotoptions: { series: { name: 'population', maxpointwidth: 30, datalabels: { enabled: true } } }, series: [{ name: 'population', colorbypoint: true, data: [{ name: 'district', y: 28, drilldown: '20' }] }], drilldown: { series: [{ id: '20', data: [ ['village1', 6], ['village2', 22] ] }] } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/modules/drilldown.js"></script> <div id="chart_div1" style="margin:0px;"></div>
the simplest solution remove max: 5. won't see wrong category label , not see slots empty. see this updated jsfiddle demonstration.
Comments
Post a Comment