I am trying to update our old chart rendering engine to Highcharts.
How can i draw a chart like this with Highcharts?
example
I think maybe there is some way to combine the polar chart and pie chart but still not find out how to do it.
How about instead of combining polar and pie charts, use only polar chart? I prepared an example for you where I am using four series. The first one has disabled grouping and enableMouseTracking and it is treated as a background. I also modified pointPadding and groupPadding to be able to display series exactly as in the provided image. Take a look at the example below.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.grouping
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
https://api.highcharts.com/highcharts/plotOptions.series.enableMouseTracking
Example:
http://jsfiddle.net/6hjefrcu/
the problem is you are adding the pie chart after the polar chart and the pie got on top of polar so you have 2 solutions
1.- add the pie chart before the polar chart
2.- play with zIndex; set zIndex of polar to 1 and zIndex of pie chart to 0 or in your code just set pie chart zIndex to -1
chartRender.addSeries({
name: 'score-template',
type: 'pie',
slice: false,
pointPlacement: 'between',
data: [
50, 80, 30
],
zIndex: -1
});
http://jsfiddle.net/z3Lr2z54/2/
Related
I have a categorical polar chart with 5 axes, and each axis has its own min/max range. I would like to configure both the axis labels and to add ticks to each individual axis.
The axis labels are drawn on the axis line itself, but I'd prefer them to be drawn slightly away from the line
There are no ticks on each axis, and I would like short ticks drawn on each axis line.
I've tried tinkering without success with the gridLine* and tick* y axis properties. Nothing seems to visually change when I do this, so I am guessing I'm barking up the wrong tree. Can I get tickmarks and better label positioning?
Here's a fiddle for this: https://jsfiddle.net/cfarmerga/cgrk96yh/
Use chart.parallelAxes.labels option to set x and y axis labels positions.
Example code:
chart: {
polar: true,
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
labels: {
y: 25,
}
},
}
API Reference:
https://api.highcharts.com/highcharts/chart.parallelAxes.labels
There is no possibility to set ticks for the polar chart from the API options. You will need to draw them using Highcharts.SVGRenderer. Check the similar thread at Highcharts forum: https://www.highcharts.com/forum/viewtopic.php?f=9&t=45661
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
How can I draw a high chart with two labels in x coordinate one is string another one is a date in highcharts
You can use the xAxis.categories feature to achieve it.
Demo: https://jsfiddle.net/BlackLabel/xj0dh8es/
xAxis: {
categories: ['test1', '04/07','05/07','06/07']
},
API: https://api.highcharts.com/highcharts/xAxis.categories
Please any one help me. How to plot the line chart in 3d Highcharts. They provide the example chart for 3D column chart but i want 3d line chart. How to plot the line chart instead of Column chart.
Thanks in Advance.
Plotting lines is just line plotting points, originally shown here
To change that plot from points to lines, first change the colorByPoint to false. Then add lineWidth: 1. That will get you lines. To remove the vertex markers, add to plotOptions.scatter:
marker: {
enabled: false // true removes vertex markers
}
Finished example here
I have a Highcharts 3.0 chart that shows both a column chart and a pie (donut) chart. This combo chart was rendering fine with the previous version of Highcharts.
Since upgrading the donut chart only renders to the highest y axis line and does not render above that line. The pie (donut) chart used to render completely with the top half of the pie (donut) chart being to the right of the chart title.
Any ideas?
I have added a jsfiddle with a small modification to the Highcharts provided combination chart (http://www.highcharts.com/demo/combo) to show the issue.
The only line I changed is where to center the pie chart.
center: [300, 1],
http://jsfiddle.net/Sh7wY/
The pie chart is cutted, because is our of plotArea, where chart can be created. So you can modify pie size http://api.highcharts.com/highcharts#plotOptions.pie.size to make chart smaller or modify center parameter.
You have to change this line :
center: [300, 1],
by this one
center: [300, 100],
The second parameter is equivalent to the style 'top' of your chart
highslide-software fixed the regression with pies being clipped to the plot area by default. They also provided a workaround which is working.
See https://github.com/highslide-software/highcharts.com/issues/1647.
My goal is to have an arearange chart with bolded only top "border" with additional markers just on hover. I was trying to achieve with just one arearange graph, but I think it is not possible with arearange chart (linewidth works for both bottom and top border, and I am not able to show marker at all...). I have decided to go on with additional spline chart that would exactly overlap the top border of arearange chart. I have provided the working example in here:
in jsfiddle go to check: /ZvZDZ
As you can see on the top of the chart, spline graph does not exactly over lap the arearange chart, although data is this same.
Is there a way to fix that, so those both graphs would overlap
maybe there is a way to use just arearange chart without spline chart?
any help would be appreciated
I think you should use or:
line series and arearange
spline series and areasplinerange
Just mixes spline and arearange will provide example you can see. Unfortunately using only one arearange series is not possible - markers are disabled.
Example: http://jsfiddle.net/ZvZDZ/2/
Code:
series: [{
type: 'areasplinerange',
name: 'areasplinerange',
data: areaData,
marker: {
enabled: true
}
}, {
type: 'spline',
name: 'spline',
data: splineData
}]