I would like to edit or remove the gaps in a Higharts chart like this:
Is there any way to style or configure my chart to achieve this?
This is the Demo:
https://www.highcharts.com/samples/codepen/highcharts/demo/bar-stacked
Thanks
You can control the space between bars using pointPadding, groupPadding and borderWidth properties:
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
Demo:
https://jsfiddle.net/BlackLabel/at1r2xLj/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.borderWidth
Related
I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example
You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am trying to use the colorByPoint option as this is more or less what I want, however I have a dual bar graph with two bars per section and I want to color them each a different color based on the series colors.
When I add the following Highcharts snippet, the bars are styled the way I want. But ultimately I want each section to have its own color scheme. (light purple, dark purple, light blue, dark blue etc.):
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
},
tooltip: {
valueSuffix: ' km'
},
pointPadding: 0,
groupPadding: 0.1,
borderWidth: 0,
colorByPoint: false // Switch this to true in the jsFiddle
},
}
If you switch colorByPoint to true, the colors alternate and progress the way I want, but suddenly both bars in each group are colored the same color.
How do I use the colorByPoint while maintaining that each POINT remains a different color (you'd think it would do this by default).
jsFiddle
As was mentioned in the comment, colorByPoint works per series, so it won't work with the global color arrays. However, you can define colors array per series just as colorByPoint works. Then you can split the initial array and assign them to series.
var colors = ['#CDAED1', '#82368C', '#94B8D2', '#2a71a5', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 'orange'];
var splitColors = [
[],
[]
];
colors.forEach((color, i) => {
splitColors[i % 2].push(color)
});
In chart config:
series: [{
colors: splitColors[0]
}, {
colors: splitColors[1]
}]
example: http://jsfiddle.net/u59176h4/33/
I have a Highcharts with type: "column", stacking "normal". And when I hover blocks from the chart I need to show a border. So I set the next settings:
...
plotOptions: {
column: {
stacking: 'normal',
groupPadding: 0,
borderWidth: 10,
pointPadding: 0,
states: {
hover: {
brightness: 0,
borderColor: 'black'
}
}
}
}, ...
But when I hover block there is a problem with border - it overlapped by neighbours blocks, and the border isn't fully visible.
Maybe the Highcharts has some additional setting to avoid this bug, or maybe it's possible to increase z-index of hovered element?
Here is an example:
Grzegorz Blachliński, thank You very much! I found a few solutions on that github topic.
They are here: http://jsfiddle.net/LLo7324r/ , http://jsfiddle.net/rvk0gc9r/6/
Is it possible to remove the empty space between the bars within a Highcharts polar chart, so that it looks like a pie chart? I just want to fill up the whole 360 degrees of the chart without spaces between the "spikes".
Example: JSFiddle
Are there any options for the plot or series parameter?
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
You just have to add the pointPadding option :
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPadding: 0
}
}
http://jsfiddle.net/7pddwx6a/
I have a line graph that uses a fillColor / linearGradient. When I reverse the y-axis, the fill moves to be from the line up to the top of the graph. I want it to stay as the fill from the line down to the x-axis.
For example:
http://highcharts.com/stock/demo/yaxis-reversed
Notice that the blue fill is above the line when the Y-axis is reversed. I want it to remain below the line even when I reverse the axis.
Is this possible?
Here is a simple example as explained in my comment. I hope this helps.
This is the important part:
chart: {
renderTo: 'container',
...
backgroundColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgb(69, 114, 167)'],
[1, 'rgba(2,0,0,0)']
]
},
},
...
plotOptions: {
series: {
fillColor: 'white'
}
},