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.
Related
Is there any way to update the color of a single point in a grouped data set? I can't seem to find a way to reliably set the colors.
A fiddle can be found here demonstrating the issue.
Points are grouped during the rendering process of the chart so they cannot be specifically targeted via constructor options (because we don't know which points will be generated by Highcharts algorithms).
What is more, Higcharts doesn't allow performing update function on the grouped point.
As a workaround your can change the CSS of point's SVG element:
chart.series[0].groupedData[0].graphic.css({
color: 'red'
});
Live demo: http://jsfiddle.net/BlackLabel/9ey2yq3u/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
Has anyone been able to successfully render a cross-hair programatically in Highcharts?
I have a visualization playing an animation through time and I would like to co-relate the position on the chart via the crosshair. I find that visual cue better than selecting the point on a series. Thanks!
Although Highcharts has something called a cross-hair, I guess what I'm looking for is a plot line.
I've found documentation here and an example scenario
EDIT: I've also noticed that marker.enabled must be set to false or the plot line doesn't show.
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.
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
Hello I'm original using highcharts
because my clients has need to see different view based on time,
like 1day,2day,3day,7day,1month, so I figure out highstock is more resemble
to this, but using highstock is missing some feature.
while I successfully figure out how to add legend(legend), change point display
(tooltip:formatter), change xaxis display and navigator display(dateTimeLabelFormats),
I see the display of line just like stock, which means:
it doesn't consider the absolute value of which too much, like I have connected terminals varying from 8-10, registered terminals varying from 2-3, unfornately it will draw registered terminals above connected terminals, which doesn't quite make sense, (besides the yAxis display is not correct, when it draw 5, the point above which actually says 4..), I also tried
plotOptions: {series: {compare: 'percent'}},
and
plotOptions: {series: {compare: 'percent'}},
but doesn't work, the y Axis is still quite confusing,
does anybody has a good solution? Thanks.
Had the same issue recently. It basically come from leaving useless parts of the example code in :D
Taking out the
plotOptions: {series: {compare: 'percent'}},
part should make it use the absolute values.
I assume taking out the compare parameter alone should be enough as well but since its the only thing you set from the plotOptions there is no need to keep the rest.