We Keep Coding

Manually adding text over pie chart

3 slices in my pie chart fall under same category. It's the gray slices (174, 29, 234). Is it possible to overlay text on cover all 3 slices. Can the overlay text be rotate or curved in order to cover the grey slices.
Here is my working fiddle: https://jsfiddle.net/1h8p257c/
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1',
y: 234,
color:'#808080',
legendIndex: 1
}, {
name: 'Consent Order 2',
y: 29,
color:'#C0C0C0',
legendIndex: 2
}, {
name: 'Consent Order 3',
y: 174,
color:'#DCDCDC',
legendIndex: 3
},{
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});

If they're all the same category, why not just combine them like so:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1 - 3',
y: 437,
color:'#808080',
legendIndex: 1
}, {
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>
<div id="container"></div>
Or does the separation matter?

You can use Highcharts.SVGRenderer to add additional text to the chart:
events: {
load: function(){
var center = this.series[0].points[2].shapeArgs;
this.renderer.text(
'someText',
center.x + this.plotLeft - 20,
center.y + this.plotTop + 50
).attr({
fill: 'red',
'font-size': '20px',
rotation: -45,
zIndex: 10
})
.add();
}
}
Live demo: https://jsfiddle.net/BlackLabel/t04gqy2h/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

Get position marker line-chart highcharts

Is there any chance in the following example, get the exact position of the marker circle, with Highcharts?
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x',
panning: true,
panKey: 'shift',
scrollablePlotArea: {
minWidth: 600
}
},
title: {
text: '2017 Tour de France Stage 8: Dole - Station des Rousses'
},
subtitle: {
text: 'An annotated chart in Highcharts'
},
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 27.98,
y: 255
},
text: 'Arbois'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 45.5,
y: 611
},
text: 'Montrond'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 63,
y: 651
},
text: 'Mont-sur-Monnet'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 84,
y: 789
},
x: -10,
text: 'Bonlieu'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 129.5,
y: 382
},
text: 'Chassal'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 159,
y: 443
},
text: 'Saint-Claude'
}]
}, {
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 101.44,
y: 1026
},
x: -30,
text: 'Col de la Joux'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 138.5,
y: 748
},
text: 'Côte de Viry'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 176.4,
y: 1202
},
text: 'Montée de la Combe<br>de Laisia Les Molunes'
}]
}, {
labelOptions: {
shape: 'connector',
align: 'right',
justify: false,
crop: true,
style: {
fontSize: '0.8em',
textOutline: '1px white'
}
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 96.2,
y: 783
},
text: '6.1 km climb<br>4.6% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 134.5,
y: 540
},
text: '7.6 km climb<br>5.2% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 172.2,
y: 925
},
text: '11.7 km climb<br>6.4% on avg.'
}]
}],
xAxis: {
labels: {
format: '{value} km'
},
minRange: 5,
title: {
text: 'Distance'
}
},
yAxis: {
startOnTick: true,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
labels: {
format: '{value} m'
}
},
tooltip: {
headerFormat: 'Distance: {point.x:.1f} km<br>',
pointFormat: '{point.y} m a. s. l.',
shared: true
},
legend: {
enabled: false
},
series: [{
data: elevationData,
lineColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.5,
name: 'Elevation',
marker: {
enabled: false
},
threshold: null
}]
});
What I want is that when a user clicks on the chart, get the marker circle position
It is for use with the annotations plugin, get the coordinates of that point or circle, and create a note right there
To make it clear, this point:
Line chart

I solved my problem
using the data array, and with the following code
events:{
click: function(e){
var x = e.xAxis[0].value,
y = elevationData[x.toFixed(1)*10][1];
this.addAnnotation({
xValue: x,
yValue: y,
allowDragX: false,
allowDragY: false,
title:{
text: "Hola"
} ,
shape: 'text'
});
//this.redraw();
this.redrawAnnotations();
console.log(this.annotations);
}
}

Can Highcharts Bubblechart show the data-label of the top bubble when there are bubble overlapping?

The link below is the example of bubble overlapping, I want to know if I can show the data-label of the top overlapping bubble. In this case, show the label of the yellow bubble which is 'DE'.
- Example of overlapping
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 50, y: 50, z: 50, name: 'BE', country: 'Belgium', color:'red' },
{ x: 50, y: 51, z: 50, name: 'DE', country: 'Germany', color:'yellow' },
{ x: 100, y: 100, z: 50, name: 'DE', country: 'Germany' }]
}]
});
});

How to Disable Highchart Unit Display None [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to have a Highcharts - Spiderweb like This Demo but I need to Update/hard code the yAxis values. I also need to stylize them the color, font and size. can you please let me know how? Is there any way to stop displaying the default units and only display the chart?
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
Thanks

$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
formatter: function() {
return null;
}
},
title: {
text: '10'
},
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
you can also check http://www.highcharts.com/docs/chart-design-and-style/colors for color and style

Highcharts separate datalabels per series

I have the following high charts:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter',
zoomType: 'xy'
},
title: { text: 'Report' },
xAxis: { title: { enabled: true, text: 'Score' },
startOnTick: true, endOnTick: true, showLastLabel: true, min: -10, max: 11 },
yAxis: { title: { text: 'Question', align: 'left' }, min: 0, max: 27, reversed: true, categories: categories, labels: {enabled: true}},
tooltip: { formatter: function() { return '' + this.x +' score'; } },
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 320,
y: 35,
floating: true,
backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
borderWidth: 1,
width: 200,
height: 200
},
plotOptions: {
linewidth: 10,
series: {
shadow: true,
dataLabels: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
rotate: 0,
formatter: function() {
return '<b style="color:gray">' + this.point.x + '</b>';
},
style: {
color: '#000',
font: 'bold 18px "Trebuchet MS", Verdana, sans-serif;'
},
x:-25,
y:7
}
},
scatter: {
marker: {
enable: false,
radius: 15,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
id:'def',
name: 'def',
color: 'rgba(223, 83, 83, .5)',
data: [[10,2],[9,3],[9,4],[5,5],[6,6],[7,7],[9,8],[8,9],[9,11],[7,12],[6,13],[8,14],[7,15],[8,16],[6,18],[8,19],[9,20],[7,22],[6,23],[9,25],[9,26]]
}, {
id:'abc',
name: 'abc',
color: 'rgba(119, 152, 191, .5)',
data: [[6,2],[3.5,3],[7.5,4],[9,5],[3.5,6],[5,7],[9,8],[5,9],[8.5,11],[8.5,12],[8.5,13],[-1,14],[10,15],[8,16],[7.5,18],[7,19],[7,20],[5,22],[8,23],[7,25],[6.5,26]]
}]
});
I want to have different styles for the datalabels, so abc pulls to the left (using x parameter) and def pulls to the right.
Currently it's set globally for both.
If i try:
chart.series[1].options.dataLabels.x=25;
chart.redraw()
Nothing happens, datalabel is the same.
Any ideas on how to do this?

You can format data labels for each series as in this example:
Setting series-level data label options
$(function () {
$('#container').highcharts({
chart: {
marginRight: 50
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
dataLabels: {
enabled: true,
align: 'left',
crop: false,
style: {
fontWeight: 'bold'
},
x: 3,
verticalAlign: 'middle'
},
y: 54.4
}]
}]
});
});

I know that its too late for answer but it can help to someone else.
You can do that by defining x value of each series's data label.
Here is the JS Fiddle:-
data: [{
color: Highcharts.getOptions().colors[0],
y: 100,
name:'A',
yAxis: 0,
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
x: 60,
},
},
{
...
}
]