Display Stack label Highcharts -
im using stacked charts highcharts include stack name below stacked bar charts.
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"
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
Post a Comment