On bar and column charts, how do you control the series overlap in highcharts? What is the properties name?
In powerpoint this is how I would control the gap between the inside of the bars:
You need to use pointPadding property. Also groupPadding can also be useful for you.
plotOptions: {
series: {
pointPadding: 0.2
}
}
Live demo: http://jsfiddle.net/BlackLabel/782qwgnr/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I have a column chart in HighCharts and having issues where data labels are running into each other. The graph has a static width and I could potentially have 4 series with at most 4 data points inside each series (4 stacks next to each other). I do have positive and negative values. I am seeing that if the series have similar values, each column is then the same height which causes the data labels to run into each other.
Any way to fix this issue? I cannot seem to find an library option that will help.
Added the groupPadding option worked for me:
plotOptions:
{
column:
{
dataLabels:
{
enabled: true,
formatter: function() { return this.y + '%' }
}
},
series:
{
groupPadding: 0.125
}
},
Have you tried increasing the width of the bars? What about adjusting the font size of the labels? A combination of these 2 APIs should help get around this given you have a static sized chart and a maximum of 4 series with 4 data points...
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.style
I have a bar chart with one group of five items. Strangely, the distance between the bars within the same group is different. I tried out almost all imaginable settings as on the references list, but in vain.
Here is the graph.
The PlotOptions code is this:
plotOptions:
{
series:
{
borderWidth: 0,
shadow: false,
pointWidth: 10
}
},
The problem is with pointWidth property - your chart is to small for that value, remove that or change to something like ~7.
How can i remove padding between my chart and plot. I want my chart to start from the edge of plot and end the same way, but no matter what I try, i cannot remove padding :(
Thanks!
You can do that with:
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
}
},
See working example at jsfiddle: https://jsfiddle.net/d9854qLm/.
Hope that is what you want.