I have a half-donut pie chart using a 100-point series in Highcharts. Please see screenshot.
I've spent the last four or five hours trying to figure out why there's a line between each pie slice. It's not a border, because if I change the background color behind the chart to black, I can actually see the black between each pie piece. So there's a 1-pixel gap between each pie piece. I would like the chart just to be a solid color, not have a 1-pixel gap between each pie piece. Pulling my hair out trying to figure out where this setting is. Any help much appreciated.
I was finally able to fix the issue by reading about series.borderWidth. (Thanks to #BarbaraLaird.) This is from the Highcharts API docs:
borderWidth: Number The width of the border surrounding each slice.
When setting the border width to 0, there may be small gaps between
the slices due to SVG antialiasing artefacts. To work around this,
keep the border width at 0.5 or 1, but set the borderColor to null
instead.
Defaults to 1.
I was able to fix the issue by setting borderWidth to 1 and setting borderColor to null. (My borderWidth was previously set to 0 and borderColor was undefined.) That filled in the "gaps" between the antialised slices.
Related
I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:
Can you customise the height and width of the data points on Scatter chart? I want the square data point to be long rectangle line as demonstrated on the image below. The only option I see is pointRadius but that increases both h/w so doesn't give me desired size.
Thanks
On options of chart.js, adjust barPercentage of xAxes
Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom
I have several line (serial) charts where I do not want any axes visible, just the graph line itself. I can easily hide the ValueAxes by setting axisThickness to 0, but I cannot get the categoryAxis to hide. I have tried the following:
"categoryAxis": {
"axisThickness": 0,
"axisAlpha": 0
}
I can fake hide it by setting "axisColour" to the same colour as the background-color of the containing div. However, it seems to blend with my white graph line when the graph line is running along the hidden axis (consecutive zero values).
How can I hide the category axis properly? Why would "axisThickness" and "axisAlpha" have no effect even though they are in the documentation for CategoryAxis (and they work perfectly for ValueAxis)?
Have you tried to switch off categoryAxis labels: labelsEnabled: false?
Here's the reference in official AmCharts docs: https://www.amcharts.com/docs/v3/reference/categoryaxessettings/#labelsEnabled_property
I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/