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.
Related
I am using Vaadin Charts 4.1.0. I m using Chart chart = new Chart(ChartType.COLUMNRANGE); I am displaying some boxes by configuring DataSeries with xaxis and y axis values but based on some criteria I wanted to draw line before each box with some start value and end value. so Can anybody please help me to draw line before each boxes
I have been searching this but not able to get any solutions for this. I want my scatter chart to be of fixed height regardless of no of legends used.
Please look into below fiddle link:
http://jsfiddle.net/3o982ewu/118/
"chart": {
"type": "scatter",
"zoomType": "xy",
"plotBorderWidth": 2,
"width": 400,
"height":400,
.....
I have set chart height to be 400. If no of legends increase, then scatter chart height gets adjusted (decrease) accordingly. You can try increasing the legends and notice that chart height gets decreased. I have tried other options like setting margin top and bottom (suggested in one post) but no luck.
I see that in highcharts js, there is 'plotHeight' variable which is used to set the chart height but I find no means to set it from my code or provide into as chart options. This scatter chart will be displayed in pdf so there is no scope of adding pagination, scrolls or any other stuff which is feasible only in web browser but not in pdf.
I am answering my own question because I found a way to deal with this scenario.
We hid the legends on the chart, so this way plot height of the chart will be always fixed. (plotHeight will be equal to the height of the chart which we provide in the chart settings considering we don't supply any margins)
We stored the data points (color of the legend and legend name) in the array and printed those outside the chart to make them appear as legends.
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/
How to remove/hide sliced line from pie chart when only one object with 100%? Issue in IE and Firefox.
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