I made 2 pie charts using Highcharts from different data.
So they have different number of data as well as legends.
But I want to align them properly so chart by chart, legend by legend.
How can I do this?
I tried to set max-height of pie chart legends but that not works.
Any help would be appreciated.
You will need to use the chart.spacingBottom and chart.spacingTop (API Documentation) to create the same space on both charts like this :
chart: {
spacingTop:15,
spacingBottom:18
},
Fiddle
With vertical legend layout it will be better to use margin property:
chart: {
type: 'pie',
marginBottom: 80
},
Live demo: https://jsfiddle.net/BlackLabel/a62ztm5o/
API: https://api.highcharts.com/highcharts/chart.marginBottom
Related
I need legend colors in square form but its square boxes also appearing on graph which I don't need.
It is also appearing on the graph which I don't need.
You can add the below plugin to use legend symbol drawing method from pie series and set legend.symbolRadius to 0.
(function(H) {
H.seriesTypes.line.prototype.drawLegendSymbol = H.seriesTypes.pie.prototype.drawLegendSymbol;
}(Highcharts));
Highcharts.chart('container', {
legend: {
symbolRadius: 0
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/0Lf2qupm/
API Reference: https://api.highcharts.com/highcharts/legend.symbolRadius
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am building a pie chart with highchart. I need to set custom title for my pie chart. And I need to align it to the center of the pie chart. Everything works fine except the initial circle loading animation of pie chart. If I remove
verticalAlign: 'middle',
It will work. The problem is only in highchart v7.1.1 . This animation is working fine in Highchart v7.0.3.
This is my codepen link.
Can any one please help me to fix it?
Reported issue: https://github.com/highcharts/highcharts/issues/10835
To workaround enable floating in title configuration object:
title: {
floating: true
},
Live demo: http://jsfiddle.net/BlackLabel/9nywd2mx/
API Reference: https://api.highcharts.com/highstock/title.floating
Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/
Using highcharts, legends are displayed in a horizontal manner. I am trying to display in vertical order (one series below the other) but I could not find any solutions for that.
In the image below, the order of legends are horizontal. Can someone help me figure out how to display the legend in a vertical order?
Use this snippet, it will place the label vertically in bottom of chart:
legend: {
verticalAlign: 'bottom',
layout: 'vertical
},
You can check it with this fiddler.
I am using highcharts 3D pie and if some label is a little bit long it does not resize correctly.
Here it is an example which I have taken from highcharts documentation and forked it for getting large labels.
http://jsfiddle.net/78wr256o/
It is important to mention that I would prefer to display the whole name and not cropping it. Resizing correctly the chart, keeping it centered and moving labels position if it is possible.
This is the initial version:
This is exactly the same chart but with a large label:
You can use html and css to format data labels.
series: [{...
dataLabels: {
useHTML: true,
style: {
"width": "30px"
}
......
Here is an example http://jsfiddle.net/8d517w3v/
It doesn't crop rather wrap labels around and make graph centered.