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.
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I have applied the plotBand option for the xrange chart where the first row is small than the second on , but when resizing the window the data series are not aligned with the plotBand area.
Currently I'm modifying the y and height of the series by using css, is there any way to make it dynamic to fit into the plotBand area during window resizing.
Jsfiddle: http://jsfiddle.net/karnan796/t1Ldnc69/13/
also the green bar not aligned to the plotBand area
You need to adjust the plotBands to the groupPadding value:
Highcharts.chart('container', {
...,
yAxis: {
plotBands: [{
from: -0.3,
to: 0.3,
color: '#00401f'
}, {
from: 0.7,
to: 1.3,
color: '#2f4776'
}],
...
},
series: [{
pointPadding: 0,
groupPadding: 0.2,
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/orpvc50t/
API Reference:
https://api.highcharts.com/highcharts/series.xrange.groupPadding
https://api.highcharts.com/highcharts/series.xrange.pointPadding
I am using Highcharts to draw a chart of my data.When I am having a column chart and when I drill down in it, after drill down the chart moves up from the x-axis. This is the x-axis and y-axis settings:
xAxis: {
labels: {
rotation: -20,
align: 'right'
}
},
yAxis: {
min: 0
}
Let me know if anybody has any solution for this.
PLease update the version of the highcharts to 4.0.4, because the previous one had some bugs. It worked for me.
I need to align table with highcharts, but chart has irregular padding on the edges, it's based on percentage, I guess.
I would like 30 to stick to the left edge of chart (close to 3) or set it distance manually in pixels. How can I do that in highcharts?
Based on #SebastianBochan suggestions, this is complete solution
xAxis:
startOnTick: true
endOnTick: true
minPadding: 0
maxPadding: 0
Try something like this:
yAxis: {
offset: -15
},
Check this fiddle: http://jsfiddle.net/jcxfhkht/
For the life of me I couldn't figure out how to do a plot like the above in Highcharts. I also found this to be difficult to do in Excel
You can achieve the above by using the colorByPoint option.
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
colorByPoint: true
}
},
See fiddle here.