For this kind of chart here is jsFiddle. I want to keep the data labels for the every series on the chart. But I can't figure out how I can handle this overlapping issue.
First I was unable to see labels for every series, with this option allowOverlap: true I can see lables but as they are overlapping. I can't figureout how to present chart in readable way.
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
crop: false
}
}
Move data labels using dataLabels.y.
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2],
dataLabels: {
y: -5
}
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34],
dataLabels: {
y: 4
}
}]
example: http://jsfiddle.net/VbecE/23/
Related
The first stack of my column chart is not fully visible.
The only solution I found was to add a max value on the y-axis.
Bu that is not an ideal solution because the max remains even when I disable a series by clicking on it in the legend.
Here is an JSFiddle example.
{
chart:{
type: 'column'
},
plotOptions: {
column: {
stacking:"normal",
grouping: false
}
},
yAxis: {
title: {
text: ""
},
labels: {
},
allowDecimals:true,
gridLineColor:"#DDDDDD",
endOnTick:false,
max:null
},
xAxis:{
type: "datetime",
min:1609459200000,
softMax:1638316800000,
dateTimeLabelFormats: {month:"%b",year:"%Y"},
labels: {y:20},
title:{text:null},
gridLineColor:"#DDDDDD"
},
series:[{
name:"Solar power",
data:[{
x:1609455600000,y:40.328},{x:1612134000000,y:108.824},{x:1614553200000,y:58.224}],
color: "rgba(255, 174, 1, 1)",
id:"del-solarPhotovoltaic"
},
{
name:"Delivered Electricity",
data:[{x:1609455600000,y:327.583405},{x:1612134000000,y:238.927913},{x:1614553200000,y:54.12531}],
color:"rgba(96, 189, 104, 1)",
id:"del-electricity"
},
{
name:"Natural gas",
data:[{x:1609455600000,y:4073.892843},{x:1612134000000,y:2768.81114}],
color:"rgba(93, 165, 218, 1)",
id:"del-naturalGas"
},
{
name:"Exported Electricity",
data:[{x:1609455600000,y:-19.093318},{x:1612134000000,y:-68.414876},{x:1614553200000,y:-37.718392,}],
color:"rgba(96, 189, 104, 1)",
id:"exp-electricity"
}]
}
This happens because your x-axis min value: 1609459200000 is greater than the first data point x value: 1609455600000 and Highcharts doesn't take into account the first column when calculating y-axis extremes (treated as if it were outside the chart).
Similar situation presented here: http://jsfiddle.net/BlackLabel/b1oucLne/
xAxis: {
min: 4,
max: 40
},
series: [{
type: 'column',
data: [{
x: 2,
y: 4073.892843
}, {
x: 6,
y: 2768.81114
}]
}]
As a solution reduce or remove xAxis.min property.
below is my code for the stacked bar chart, It sets the values Y-axis wise instead of X-axis wise, data [5,3] should be shown in x-axis in one row and [2,2] in another x-axis point, but plotting [5,3] and [2,2]
function barChartObject() {
return jQuery.extend(true, {}, Highcharts.setOptions({
chart: {
type: 'bar',
marginTop: 10,
marginBottom: 10,
marginLeft: 50,
marginRight: 2,
width: 500
},
xAxis: {
categories: ['Apples', 'Bananas']
},
yAxis: {
min: 0,
},
legend: {
reversed: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
}
}));
}
function addBarSeries(chart, chartData) {
_.each(chart.series, function(s) {
s.remove();
});
chart.options.legend.enabled = false;
var series = [{
name: 'John',
data: [5, 3]
}, {
name: 'Jane',
data: [2, 2]
}];
_.each(series, function(s) {
chart.addSeries(s, false);
});
chart.redraw();
}
data [5,3] should be shown in x-axis in
one row and [2,2] in another x-axis point, but plotting [5,3] and
[2,2]
Nope, it renders as it should be. Notice that your series has defined two points, like [{x: 0, y: 2}, {x: 1, y: 2}], which are clearly visible on the chart.
If you want to have those two values in one row of the xAxis, you will need to change your data into this format:
series: [{
name: 'John',
data: [2, 3]
}, {
name: 'Jane',
data: [2, 5]
}]
Demo: https://jsfiddle.net/BlackLabel/2d3u157o/
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I have two groups of stacked bars in a chart and I would like to group them visually
So how could I add extra vertical gap between specific bars in a stacked bar chart or separate the groups in some other way?
Example:
http://jsfiddle.net/KrTbz/41/
I would like to add extra vertical space between bars 4 and A
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
},
title: {
text: 'Grouping test',
},
xAxis: {
categories: ['1', '2', '3', '4', 'A', 'B', 'C', ]
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'Alpha',
data: [31, 27, 23, 22, 22, 20, 21]
}, {
name: 'Omega',
data: [5, 6, 7, 5, 6, 6, 5, ]
}, {
name: 'Gamma',
data: [60, 62, 67, 69, 68, 70, 71]
}]
});
});
It is not possible in simple way, but only what comes to my mind is quite dirty solution but maybe will be enough. So you can set null values in series and in categories.
http://jsfiddle.net/KrTbz/42/
xAxis: {
categories: [ '1','2','3','4','','A', 'B', 'C', ]
},
series: [
{
name: 'Alpha',
data: [31,27,23,22,null,22,20,21]
}, {
name: 'Omega',
data: [5,6,7,5,null,6,6,5,]
} ,{
name: 'Gamma',
data: [60,62,67,69,null,68,70,71]
}
]
i will like the possibility of disabled some labels of my chart
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Year 2009',
data: [873, 614, 4054, 732, 34]
}, {
name: 'Year 2010',
data: [573, 1500, 4054, 732, 34]
}, {
name: 'Year 2012',
data: [373, 1380, 4054, 732, 34]
}]
});
});
});
http://jsfiddle.net/tkGFr/
for example, this chart will show all the labels and i will like the possibility of make only enabled 2 or 3 (year 1800, 1900 and 2009) of them but always maintaining the other options (year 2008, 2010 and 2012)
is this possible?
i appreciate your help and advice :D
As I assume, you would like to have enabled "year 1800, 1900 and 2009" in legend and displayed in chart, but other only in legend? If yes you can use visible parameter
{
name: 'Year 1800',
visible: false,
data: [107, 31, 635, 203, 2]
}
Even showInLegend: false; can be used; if want to hide in legends.