Column labels on tall charts

I made a Highcharts chart with grouped and folded columns, as in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped . The example shows the number of fruits for 5 different people, grouped by gender. In this example, I miss the X axis label showing the name of the group (male or female) under each group. Can this be added to the chart?

Here is a simplified version of the diagram I'm trying to compile: http://jsfiddle.net/WQjVP/66/ . It shows the number of open (blue) and expired (red) problems for three places in the case management system. The left column in each group shows the numbers for this location for July, and the right column in each group shows the numbers for August for the same unit. I would like to show the month under each column so that the first column is β€œJuly”, the second is β€œAugust”, the third is β€œJuly”, etc. Between the column and the location label.

chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column' }, title: { text: '' }, subtitle: { text: '' }, xAxis: { categories: ["Location A","Location B","Location C"], title: { text: "Location" } }, yAxis: { allowDecimals: false }, plotOptions: { series: { dataLabels: { enabled: true, formatter: function() { if (this.y === 0) { return null; } return this.y; }, style: { color: 'white' } } }, column: { stacking: 'normal', borderWidth: 0 } }, series: [{ "color": "rgb(0,0,255)", "name": "open", "data": [18, 2, 6], "stack": "Jul"}, { "color": "rgb(255,0,0)", "name": "overdue", "data": [0, 0, 0], "stack": "Jul"}, { "color": "rgb(0, 0, 255)", "name": "open", "data": [20, 1, 10], "stack": "Aug"}, { "color": "rgb(255, 0, 0)", "name": "overdue", "data": [2, 1, 2], "stack": "Aug" }] }); 
+6
source share
1 answer

Try using stackedLabels .

 yAxis: { stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'gray' }, formatter: function() { return this.stack; } } } 

Demo

link

+15
source

Source: https://habr.com/ru/post/924171/


All Articles