I am using highcharts windrose graph for one website.
I want to display bar from top to center, not from center to top. How can I do this?
See this illustration image:
You are looking for the yAxis.reversed option. Setting it to true will make your bars start from the outer edge, when having a polar column graph ("windrose"). Example code:
yAxis: {
reversed: true
}
As seen in this JSFiddle demonstration.
You can also use startAngle / endAngle like in the example: http://jsfiddle.net/4UXva/
Related
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
I would like to position spokes in pie to be put "outside" of the pie.
My problem is that on top and bottom, spokes need to go out of the "box" of the chart view.
This lead to spokes be inverted and placed in wrong direction.
I placed
self.clipsToBounds = false
self.canvas.clipsToBounds = false
My question is how to persuade chart to dray outside the bounds, or how to put padding around the chart.
Marko
Pasting my answer from https://forum.shinobicontrols.com/t/position-of-the-spokes-in-pie/1693 in case it helps anyone here:
You can adjust the radius of the donut chart by setting donutSeries.outerRadius, and the length of the spokes by setting donutSeries.style().spokeStyle.length. Decreasing the outer radius and possibly also increasing the spoke length should give you the effect you're looking for.
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
Is there a way to provide a corner radius value for "plot border"?
Looking for something similar to the borderRadius option for the chart border. But we need it for the plot border.
I tried doing adding radius after loading the chart with the below but it does not work
chart.plotBorder.rx=5;
chart.plotBorder.ry=5;
chart.redraw();
Appreciate any help
Thanks.
Use element.attr() method:
load: function(){
this.plotBorder.attr({rx: 10, ry: 10})
}
See example: http://jsfiddle.net/3bQne/45/
However, as you can see, it won't work as you may expected.