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.
Related
I'm attempting to get rounded columns / border radius on a polar chart with Highcharts.
I've tried a number of borderRadius options (plotOptions: { column: { borderRadius: 50 }}) as well as the third-party rounded-corners.js script that surfaces when searching for individual rounded corners.
It seems that these options work for a regular 'column' type chart, but once you go polar: true, the border radii no longer apply.
Looking for options...
I am using highchart in my project But i don't know how to give gradient color to x-axis crosshair
You can create a plot band using Axis.addPlotBand() function on mouseOver and remove it on mouseOut with Axis.removePlotBand(). To apply gradient, use linearGradient along with stops. Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/Axis.addPlotBand
http://api.highcharts.com/highcharts/Axis.removePlotBand
DOCS Reference:
https://www.highcharts.com/docs/chart-design-and-style/colors
Example:
http://jsfiddle.net/36comwzL/
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/
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