I can't figure out how to make the space between categories smaller.
I used:
series:{
pointPadding: 0,
pointWidth:30,
groupPadding: 0
}
If I increase pointWidth to 30 for example the bars overlap each other instead of taking up the white space between.
This is my chart:
http://jsfiddle.net/domino/QzCSa/2/
Change the groupPadding: 2 property from 0 to 2
Play with this property and get the width which you want.
Hope this helps
Related
i want to add round corners to radial bar using highcharts is there a way i can do it?
I was able to add round corners to simple column chart using 'borderRadius'. Here is an example
https://jsfiddle.net/agbvnm91/1/.
column: {
stacking: 'normal',
borderWidth: 0,
pointPadding: 0,
groupPadding: 0.01,
pointWidth: 10,
borderRadius: 10
}
But it's not working for radial bar. Here is example of what I tried https://jsfiddle.net/agbvnm91/1/.
I'm creating a column chart that has two series (Income and Expenses) in Highcharts. I would like to have no padding between each column and I would like to be able to set the maxPointWidth to a value.
I already tried setting the maxPointWidth to a value and setting the pointPadding to zero. But when I do that the columns have extra padding between each of the series.
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
maxPointWidth: 32
}
}
I expected the columns to be adjacent to each other but instead the columns had even more space but the maxPointWidth did restrict the thickness of the columns to 32.
You can try to set also the groupPadding = 0 and borderWidth = 0:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
maxPointWidth: 32,
groupPadding: 0
}
}
Note, that columns are equally spaced on the chart plot area and when you set fixed columns width then space between them has to be adjusted.
Demo:
https://jsfiddle.net/BlackLabel/5f614cjz/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.borderWidth
I have some values between 0 and 1 that I want to show in a heatmap graphic in highcharts.
The gradient bar should be between 0 and 1, but it is bigger and when I select a cell in the graphic, the color does not match with the color in the gradient bar.
colorAxis: {
min: 0,
max: 1,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
tickPositions: [0, 0.5, 1]
}
http://jsfiddle.net/n13vuaja/
For values between 0 and 150 it works: http://jsfiddle.net/2p2bunnm/
but with values between 0 and 1, even adding the min: 0, max:1, does not match the cursor in the gradient bar with the color.
any idea how to make the gradient bar cursor select the proper color between 0 and 1?
Thanks!
This is a known bug with heatmaps. Currently the workaround seems to be removing the line
this.isXAxis = true;
in the colorAxis init function of the heatmap module (line 93 in heatmap.src.js).
I think it's a bug in highcharts. Their demo if scaled down to small value doesn't match the colorAxis correctly to the legend color (http://jsfiddle.net/3188gubh/).
E.g. 0 is not completely white on the legend, but is on the chart.
Without a code block stackoverflow doesn't let me post a link to jsfiddle :(
my jsfiddle sample is here. The vertical align is bottom. When I set align = 'center', the legend is underneath the charting area. However, if I set align='left' or 'right', the legend will occupy the charting area's space and make the area really small.
I want the legend at bottom left of the charting area, is it possible?
http://jsfiddle.net/daxu/xeb3n/585/
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
y: 0,
padding: 0,
margin:5,
itemMarginTop: 0,
itemMarginBottom: 0,
itemStyle:{
fontSize: '10px'
}
},
You can set floating: true, and then adjust x and y to get to the position that you want.
Documentation
Instead of floating the position, you can use x when align: 'center'. In that case, the legend will be offset from the naturally aligned position. Of course, you'll need to determine the offset to works best for your chart. Negative x values will move the legend towards the left, see example image.
I would like some help with this chart. If the series values are not 0.0, the minimum value of the chart is 0, and it's correctly on the bottom of the chart:
But if the values are all equal to 0.0, the y-axis line is shown in the middle of the chart:
I try to set
{min: 0,}
on the y-axis, but it doesn't work. Obviously I can't set a max value because I have a dynamic data. How can I solve this?
If you can't set a max, you can set a minRange
yAxis: [{ // Primary yAxis
min: 0,
minRange: 0.1,
http://jsfiddle.net/tZayD/