The data labels when using 3d Pie Chart displays in an incorrect manner.
I only have two slices and most of the times, the labels of one slice ends up being in the space of other slice. See http://jsfiddle.net/tn036sak/
I do want to use the distance property so it does not show labels outside of the pie chart.
This is my code -
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 65,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
distance:-40,
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 10.0],
['Chrome', 90]
]
}]
});
});
Please suggest how the labels can be shown on the respective slice.
Related
i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
Playing with the Highcharts Map samples and wanted to see how multiple series worked with maps. Here is the US population density map with another series showing the state capitals:
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-capitals.json', function (dcap) {
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
if (_dochartwhenready === true) {
if (_domap === true) {
var mapobject = {
chart: {
map: 'countries/us/us-all',
borderWidth: 1,
renderTo: 'container'
},
title: {
text: 'US population density (/km²)'
},
exporting: {
sourceWidth: 600,
sourceHeight: 500
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
},
{
animation: {
duration: 3000
},
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: dcap,
joinBy: ['lat', 'lat', 'lon', 'lon'],
dataLabels: {
enabled:true,
color: '#ccccc',
format: '{point.capital}'
},
tooltip: {
pointFormat: '{point.capital}: {point.population}'
}
}]
};
_map = new Highcharts.Map(mapobject);
}
This works -- partly:
The tool tips work exactly as expected. However, only a few state capital names show up on the map. How come?
The source of the problem are overlapping data labels. This code forces Highcharts to show all of them:
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/vtwv061b/
API reference: https://api.highcharts.com/highmaps/plotOptions.series.dataLabels.allowOverlap
This is simply due the zoom level, aparently.
Also, I would not recomend using joinBy on lat and long since the may vary in really small decimals.
Here's a fiddle with a working example: https://jsfiddle.net/3ttmyxmo/
If you zoom in you will see the capital names popping over.
I used joinBy on postal-code and abrev instead of lat long:
{
animation: {
duration: 3000
},
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: capitals,
joinBy: ['postal-code', 'abrev'],
dataLabels: {
enabled:true,
color: '#ccccc',
format: '{point.capital}'
},
tooltip: {
pointFormat: '{point.capital}: {point.population}'
}
}
I've encounted a problem when updating data of pie chart by clicking on a button - the legend and title overlap pie chart. But what's interesting is that when I resize the browser, for example, maximize the browser, position of title and legend go back normal.
Problem example is shown at http://jsfiddle.net/HmmeX/3/.
Data is updated by
$('button').click(function() {
// var chart = $('#container').highcharts();
chart.setTitle({
text: 'Browser market shares at a specific website, 2010'
});
chart.series[0].setData(adata, true);/*update({
data: adata});*/
});
That looks like a bug to me. You can work around it by adding size : 300 to your pie options.
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
verticalAlign: 'bottom'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
size:300
}
},
series: [{
name: 'Browser share',
data: []
}]
});
http://jsfiddle.net/xNmLd/
I'm using highcharts with dynamically generated data and plot names. (Usually between 4 and 8 data points but there will be 2 with small numbers.)
Some of these are a bit long and cause the pie chart to be tiny so I set the plot option style width to force them to wrap and span multiple lines.
However on some of my charts the labels are overlapping and have no idea how to fix it.
Does anyone have any ideas?
http://jsfiddle.net/d600burton/TkPBq/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false
},
subtitle: {
text: 'Drag the handle in the lower right to resize'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
minSize: 1,
dataLabels: {
style: {
width: '100px'
},
enabled: true,
color: '#000000',
format: '<b>{point.name}</b>: {percentage:.2f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{name: "On Hire", y: 2884},
{name: "Collection Note", y: 674},
{name: "Off Hire Not Confirmed", y: 23},
{name: "Goods In", y: 41}
]
}]
});
Connectors and datalables are generated idenpendently, so in case when you set small with, connectors are not "moved". In other words I advice to consider width modification.