HighCharts - Trying to create a 'thin' donut chart - javascript

I am trying to create a thin Donut chart using HighCharts. I've read that If I set series.innerSize to be a slightly smaller value than series.size, I can get a thin circle. This only works to a certain extent though. No matter how close I make these values, the width of the circle border is still around 10 pixels. I'd like it to be more like three.
Can this be done?
I can get the circle to be thinner if I set the stroke-width property of the .highcharts-series path selector, but then the two segments of my donut no longer connect.
It's probably easier just to look at the jsfiddle I created: http://jsfiddle.net/bergonom/3BsYJ/
Note that I need the charts to be fairly small (like less than 100px x 100px), as shown in the fiddle.
Thanks for your help.

You can get the effect you want by specifying the sizes in pixels rather than percentages. e.g.
series: [{
data: testData,
name: "",
size: 50,
innerSize: 47,
pointPadding: 0,
groupPadding: 0
}],
http://jsfiddle.net/mMH2Z/

Related

How to center title vertically in HighCharts pie/donut chart?

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:

Make lines thicker in bar chart

I have this chart:
I have 2 issues:
How can I make the bars thicker and add space between them because they are so small that they blend in each other.
As you can see in the photo, the highest value is 3 but how can I stop the chart after that so there is no blank space like in the photo between 3 and 4.
Thank you very much!
Reduce pointPadding and groupPadding properties or increase chart's height.
Set yAxis.maxPadding to 0:
yAxis: {
...,
maxPadding: 0
}
Live demo: http://jsfiddle.net/BlackLabel/s3c7yz2w/
API Reference:
https://api.highcharts.com/highstock/series.column.pointPadding
https://api.highcharts.com/highstock/series.column.groupPadding
https://api.highcharts.com/highstock/chart.height
https://api.highcharts.com/highstock/yAxis.maxPadding

Highcharts pie chart issue (gaps between pie slices)

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.

Highcharts - Negative color with 'line' type polar chart

I'm trying to use a different color to represent negative values in a polar chart of type "line".
Is it wrong to say that this does not work?
It is definitely supported by the api. Very basic example here.
One idea you could try is overlaying an area series over the negative values, and then giving that area an opacity setting less than 100%.
So, for example, if your line is blue, overlay an area with a white background, set that area to, say, 20% opacity, and the result would be a lighter blue line in your negative values.
Here's how the values for that area series could be used:
color: '#FFFFFF',
data: [ -1, -1, ... etc. for however many values you have in the chart ],
fillOpacity: 0.2, /* 20% opacity */
lineWidth: 0, /* no borders for your area */
showInLegend: false, /* keeps the series from showing up in your legend */
type: 'area',
zIndex: 1 /* set this higher than your lines so the area appears over them */
Just a thought, but I hope it helps!

How to display all labels in Google Charts donut chart

I am using Google Charts (donut type) to display the data on our application. I noticed that when the label wouldnt fit on the pie slice, it wouldnt display. I've been checking the internet and their documentation but I could not find a way to manipulate the labels to wrap text or display all the time.
The label for the yellow slice below is not displayed.
It doesn't show the percentage label if the slice is less than 5% (this number varies depending on the size and width of your pi chart, but it's 5% in this example).
In the below graph, green is 5% and purple is 4.9%.
Here are some ideas for how to deal with this:
1) Add the following options to your options object. It will combine everything with less than 5% into one miscellaneous category that will be labeled.
sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",
2) Reduce the font-size. It still won't show labels it can't fit on, but it will show more labels because it'll be able to fit.
pieSliceTextStyle: {
color: 'black',
fontSize:11
},
3) Enter the realm of desperate hackery and set a font-size in options that is tiny so they all render, then use CSS to make those labels large again. However, because they don't fit and because the spacing is all messed up, it'll look like garbage.
pieSliceTextStyle: {
color: 'black',
fontSize:0.5
},
CSS
svg g text{
font-size:11px !important;
}
JSFiddle

Categories