Display Stack label Highcharts -


im using stacked charts highcharts include stack name below stacked bar charts.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/

js

$(function () {     $('#container').highcharts({          chart: {             type: 'column'         },          title: {             text: 'total fruit consumtion, grouped gender'         },          xaxis: {             categories: ['apples', 'oranges', 'pears', 'grapes', 'bananas']         },          yaxis: {             allowdecimals: false,             min: 0,             title: {                 text: 'number of fruits'             }         },          tooltip: {             formatter: function () {                 return '<b>' + this.x + '</b><br/>' +                     this.series.name + ': ' + this.y + '<br/>' +                     'total: ' + this.point.stacktotal;             }         },          plotoptions: {             column: {                 stacking: 'normal'             }         },          series: [{             name: 'john',             data: [5, 3, 4, 7, 2],             stack: 'male'         }, {             name: 'joe',             data: [3, 4, 4, 2, 5],             stack: 'male'         }, {             name: 'jane',             data: [2, 5, 6, 2, 1],             stack: 'female'         }, {             name: 'janet',             data: [3, 0, 4, 4, 3],             stack: 'female'         }]     }); }); 

iin chart, want show 'male' & 'female' below stack.

how can using highcharts

something below..where display stack name - "maintenance", "other" , "peak"

enter image description here

i think in case may use grouped-categories plugin. may find plugin on highcharts plugins repository: http://www.highcharts.com/plugin-registry/single/11/grouped-categories

$(function() {   var chart = new highcharts.chart({     chart: {       renderto: "container",       type: "column",     },     plotoptions: {       series: {         stacking: 'normal'       }     },     series: [{       data: [4, 14, 18, 5, 6, 5]     }, {       data: [4, 14, 18, 5, 6, 5]     }, {       data: [4, 14, 18, 5, 6, 5]     }],     xaxis: {       categories: [{         name: "fruit",         categories: ["apple", "banana"]       }, {         name: "vegetable",         categories: ["carrot", "potato"]       }, {         name: "fish",         categories: ["cod", "salmon"]       }]     }   }); }); 

and here can find simple example how chart may work plugin: http://jsfiddle.net/tfhd7/943/


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -