Is there any way of rounding both edges of the spline chart? I am almost sure I saw it done before but can't find it in the API docs.
Now my chart looks like:
Unfortuantely this option is not avaiable, but you can try to modify i.e SVG element (series).
You can use linecap, which defaults to round in the current Highcharts version.
plotOptions: {
spline: {
linecap: 'round'
}
}
As far as I know, the only two options are round (default) and square.
Official docs: http://api.highcharts.com/highcharts#plotOptions.spline.linecap
Related
I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x
I have a client that needs a pyramid chart. The funnel chart is perfect if only I could flip it around so it becomes a pyramid.
Seems like there would be a way to flip it but I cannot figure it out.
Any help would be appreciated!
Why not just modify the neckWidth and neckHeight and make the total width 0?
neckWidth: '100%',
neckHeight: '0%',
width: '0%'
See this example.
If you only want flip the Funnel chart you can use reversed attribute
in the series section of the chart
Funnel reveresed
instead of using funnel chart you can use, area chart or stacked area chart.
type: 'area'
that will be an easier way to get pyramid like in here http://jsfiddle.net/KQ344/
hope this will help you in getting what you want.
I'm trying to generate a donuts highchart, everything is running good but I can't find the way to make the labels rotate in a radial way.
I've tried:
dataLabels:
{
rotate = 'auto'
}
but no lucky
nothing is documented on Highcharts API http://api.highcharts.com/highcharts
Is it possible or I'm just dreaming?
Unfortunately this option is not supported, but you can try to use http://api.highcharts.com/highcharts#yAxis.labels.formatter and useHTML, then use your own css styles to prepare correct rotation.
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
My chart is ugly and I'm not sure what to do about it. It's ugly because the labels overlap and are barely readable. Ideas I've already considered:
Hide labels for small slices. This has the obvious negative of less information visible, especially when the page is printed. Our users print a lot.
Alternate big slices and little slices. Not ideal as it reduces the organization of the information and may suffer occasionally from the same issue.
Manually place each label with fixed positions. Expensive solution with regards to implementation time and code maintenance.
Anyone have a better idea? I wish highcharts was able to detect overlap and do something about it automatically. Here's the pic:
There is a new option in Highcharts to set the startAngle of the pie chart. You can use the startAngle to arrange all the small slices on the right side of the chart, allowing more of the labels to fit.
series: [{
startAngle: 90
}]
JSFiddle demo here: http://jsfiddle.net/highcharts/dK9CD/
I found a highcharts forum topic related to rotating the pie chart to better distribute labels in this sort of case, but it involves modifying the source to find the following line and change the cumulative reference to zero:
cumulative = -0.25, // start at top
One option that is not optimal but might work is to rotate the data labels a few degrees so that they don't overlap, like so:
{
plotOptions : {
pie : {
dataLabels : {
rotation : 15
}
}
}
}
I also come across the same issue. I fixed the issue with below code.
plotOptions : {
pie : {
dataLabels : {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}
}