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
Related
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
I am trying to show the zero value in the trellis horizontal bar charts. I have tried using the minPointLength to show the zero value. but its not working, and I have tested for another stocked vertical charts its working, but the issue with horizontal charts only. working example for vertical charts vertical charts
code i have tried:
plotOptions: {
column: {
minPointLength: 3
}
},
please find the horizontal charts jsfiddle.
thanks
Notice that your plotOptions refer to the column type of the series, but the ones that you use are bar series. If you change the code from your question to:
plotOptions: {
bar: {
minPointLength: 8
}
},
everything seems to work fine.
Live demo: http://jsfiddle.net/kkulig/c4tbpqLe/
I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.
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.