I'm drawing a half-donut-pie-chart (using innersize and start-/endAngle). But my datalabels are outside the plot area (below the center point / xAxis) or not showing at all regarding my settings.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
size: '140%',
cursor: 'pointer',
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
//useHTML: true,
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
},
style: {
width: '100px' // for line wrap on long dataLabels
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox and this is very very very long name with some spaces etc.', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
See here: jsfiddle
Using useHTML: true, useHTML: true did not work at all any positive.
Using useHTML: true would render the overflowing dataLabels inside the plot, but my long dataLabels disapeared.
So how can I accomplish this having the following things in mind?
My half-donut should always be at the bottom of my plot area and use
the space (not be too small).
It happens that I have long datalabels so defining a style.width seems to do a line-wrap if needed.
DataLabels should always be above the xAxis and not fall below the bottom of my half-donut.
DataLabels should always be shown and be outside of the chart using connectors.
Thanks in advance and best regards.
It looks like possibly bug, reported here: https://github.com/highslide-software/highcharts.com/issues/2630
Related
I'm trying to display a doughnut or semi-circle chart inside a materialize card, which is a responsive div.
I need to display simple data and use the chart as a progress bar. I started from the example in the HighCharts documentation.
Now I need to position the plot at the bottom, but remove the white space from the top. If I set the position at center:[50%,50%] there is a white space at the bottom of the container.
Is there a way to crop the height of the container and keeping the aspect ratio?
This is the code I'm using:
var data = [
{
name: 'Done',
y: 76.1,
color: "#ff6666",
dataLabels: {
enabled: false
}
},
{
name: 'To do',
y: 23.9,
color:"#dddddd",
dataLabels: {
enabled: false
}
}
];
Highcharts.chart('container', {
chart: {
plotBorderWidth: 0,
height:"400px"
},
title: {
text: 'Title'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,distance: -50,
style: {fontWeight: 'bold', color: 'white'}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
}
},
series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]
});
Here is the result I get:
You can try to play around a bit with container height, plotOptions.pie.center and plotOptions.pie.size to get the right dimensions. Please check the code below. I have changed the height of your chart to 200px, center to ['50%', '70%'] and added size of 200%.
See the sample here: https://codepen.io/anon/pen/pGVyQX?&editable=true
var data = [
{
name: 'Done',
y: 76.1,
color: "#ff6666",
dataLabels: {
enabled: false
}
},
{
name: 'To do',
y: 23.9,
color:"#dddddd",
dataLabels: {
enabled: false
}
}
];
Highcharts.chart('container', {
chart: {
plotBorderWidth: 0,
height:"200px"
},
title: {
text: 'Title'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {fontWeight: 'bold', color: 'white'}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '70%'],
size: "200%"
}
},
series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]
});
Highcharts chart consists of several HTML elements. The height option is used for setting height style for a child of the HTML element you created as a chart container.
The solution to your problem can be setting different heights:
CSS:
#container {
height: 200px;
...
}
JS:
chart: {
height: 400
},
series: [{
type: 'pie',
name: 'Value',
innerSize: '70%',
center: ['50%', '50%'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/du60mrgp/
I can't indent legend from right plot border properly
My config
Highcharts.chart('container', {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false,
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
showInLegend: true,
center: [150, 150],
},
column: {
stacking: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.2f}%)<br/>',
shared: true
},
series: [{
name: "My plot",
type: 'pie',
innerSize: '70%',
data: [ ['item',4],['item2',50],['item3',8]]
}],
title: {
text: "My chart"
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth:1,
},
});
http://jsfiddle.net/69d1d22x/
I suppose that I need to align legend left and shift it to right but I did't find any hack.
Have you tried to limit your chart width size?
Like :
(...)
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false,
width: 450,
(...)
Example:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/width/
You can use chart.marginRight to give right margin to the plot. Use this code to position the legend next to it (the assumption here is that legend.align equals to 'right'):
function alignLegend(chart) {
var group = chart.legend.group;
group.attr({
translateX: chart.plotLeft + chart.plotWidth + chart.plotBox.x
});
}
Place this function in load and redraw events.
Live working example: http://jsfiddle.net/kkulig/cthaLrb3/
API references:
http://api.highcharts.com/highcharts/chart.marginRight
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/chart.events.redraw
Is there a way to have the Highcharts Pie chart to bring down the legend when the screen size is small. Please see attached image for reference.
Here is a sample image when the screen is big.
This would what it looked like when in small screen or small device
Is this possible to achieve? Thanks for your help.
You could check the window width before creating the chart and using that information to set the alignment of the legend. For example (JSFiddle):
var isBig = $(window).width() > 700;
var legendBig = {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
};
var legendSmall = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
$('#container').highcharts({
legend: isBig? legendBig : legendSmall,
// ...
});
This is an old post, but since I ran into it, it's likely that someone else will at some point. I found out that since Highcharts 5 you can configure options for responsive behavior: https://www.highcharts.com/docs/chart-concepts/responsive, so this is the way to go now.
Here is the config I used to achieve this effect:
{
chart: {
type: 'pie',
},
legend: {
layout: 'vertical',
squareSymbol: false,
symbolRadius: 0,
},
plotOptions: {
pie:
showInLegend: true,
},
},
responsive: {
rules: [{
condition: {
minWidth: 700,
},
chartOptions: {
legend: {
align: 'right',
verticalAlign: 'top',
}
}
}]
},
}
Since you are asking for a responsive layout I've made a little fiddle which listens to the resize event and changes to legend attributes accordingly.
Not sure if it will work that well (the legend may need some adjusting in each position) but the spirit is the following:
$(function () {
$(document).ready(function () {
$(window).resize(function () {
var chart = $('#container').highcharts();
var isBig = chart.chartWidth > 450;
console.log(chart.chartWidth);
if (isBig) {
chart.legend.options.align = "right";
chart.legend.options.verticalAlign = "middle";
chart.legend.options.layout = "vertical";
chart.isDirtyLegend = true;
} else {
chart.legend.options.align = "center";
chart.legend.options.verticalAlign = "bottom";
chart.legend.options.layout = "horizontal";
chart.isDirtyLegend = true;
}
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$(window).trigger("resize");
});
});
On each resize the chart width is checked and if it's below a threshold the legend changes position attributes.
When the chart is redrawn (which it would when its container gets smaller) it the legend is drawn correctly.
Example fiddle: https://jsfiddle.net/9xfL6rz1/2/
If we had long dataLabel in a pie chart and we set the style width to 100px (in order to don't have a mini pie) some dataLabel just disappear, e.g. see the value Others1.
How to solve this?
http://jsfiddle.net/htwh3rdh/4/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b style="width: 100px; display: block;">{point.name}</b>: {point.percentage:.1f} %',
style: {
width: '100px',
},
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 40],
['Safari veryveryveryvery long label', 8.5],
['Opera veryveryveryvery long label', 6.2],
['Others veryveryveryvery long label', 0.7],
['Safari1 veryveryveryvery long label', 2.5],
['Opera1 veryveryveryvery long label', 3.2],
['Others1 veryveryveryvery long label', 0.6]
]
}]
});
});
In these cases (in my experience) (with long names and small graphics) would be better to use a pie chart with a legend of this type. In this way you don't have problems with the display of names.
JSFIDDLE
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox iuyguiygiuygiuygiuy uygiuygiuyg', 45.0],
['IE', 26.8],
{
name: 'Chrome uygiuygiuyg ',
y: 12.8,
sliced: true,
selected: true
},
['Safariiuyg iuygiuyg', 8.5],
['Opera uiy giu y giuy', 6.2],
['Others iuygiuygiuyg', 0.7]
]
}]
});
});
});
I facing a strange problem while generating a 3D-Pie chart using highcharts. The colors on different slices are not loading initially and are displaying only after mouse hover.
Code snippet:
module.pieChart = function (divid, title, subTitle, seriesData) {
//seriesData is in form of json
window[divid] = new Highcharts.Chart({
chart: {
renderTo: divid,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: title
},
subtitle: {
text: subTitle
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}, legend: {
enabled: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
}
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: title,
data: seriesData
}]
}, NodataMessage);
};
If anyone have any suggestions or solution to it.?
EDIT
DEMO
Its about Highcharts.getOptions().colors. This function generate 10 colors, and after tenth, colors list is null. And you try to push color like this:
// there is no color for i > 9
color:data[i].color;
Highcharts.getOptions().colors output is : ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#8085e8", "#8d4653", "#91e8e1"]
So, you should remove it from your options, or manually define it.
and working example:
DEMO
The problem is as #AliRıza Adıyahşi said - length of colors array. Simple solution is to take width of colors array, then instead of colors[i] use colors[i % colors.length]. See live demo: http://jsfiddle.net/nQ8k8/4/
Or just don't set colors, let Highcharts do that for you: http://jsfiddle.net/nQ8k8/5/