Mixing
How to set “Y” position in label Highcharts [duplicate]
This question already has an answer here:
Is it possible to position Highcharts dataLabels depending on the value?
4 answers
Im a trying to change the position of the label, if it is greater than 267, position it above the point, if it is lower than the point, but I can not do it in the formatter function.
I currently achieve it but not programmatically.
What I want to program, is a graph as similar as possible to:
If you can help me, thank you very much.
var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>javascript highcharts
asked Jan 2 at 17:29
elunelun
165
marked as duplicate by ewolden, Community♦ Jan 10 at 1:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Is it possible to position Highcharts dataLabels depending on the value?
4 answers
Im a trying to change the position of the label, if it is greater than 267, position it above the point, if it is lower than the point, but I can not do it in the formatter function.
I currently achieve it but not programmatically.
What I want to program, is a graph as similar as possible to:
If you can help me, thank you very much.
var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>javascript highcharts
asked Jan 2 at 17:29
elunelun
165
marked as duplicate by ewolden, Community♦ Jan 10 at 1:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Is it possible to position Highcharts dataLabels depending on the value?
4 answers
Im a trying to change the position of the label, if it is greater than 267, position it above the point, if it is lower than the point, but I can not do it in the formatter function.
I currently achieve it but not programmatically.
What I want to program, is a graph as similar as possible to:
If you can help me, thank you very much.
var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>javascript highcharts
asked Jan 2 at 17:29
elunelun
165
This question already has an answer here:
Is it possible to position Highcharts dataLabels depending on the value?
4 answers
Im a trying to change the position of the label, if it is greater than 267, position it above the point, if it is lower than the point, but I can not do it in the formatter function.
I currently achieve it but not programmatically.
What I want to program, is a graph as similar as possible to:
If you can help me, thank you very much.
var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>This question already has an answer here:
Is it possible to position Highcharts dataLabels depending on the value?
4 answers
var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>var char = new Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
title: {
text: 'Title'
}
},
yAxis: {
title: {
text: 'Subtitle'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {},
}
},
series: {
label: {
connectorAllowed: false
},
dataLabels: {
enabled: true,
formatter: function() {
var color = '';
var serie = this.series.name;
if (serie == '2017') {
color = 'blue';
} else if (serie == '2018') {
color = 'orange';
} else {
if (this.x == 0) {
//console.log(serie);
color = 'red';
} else {
color = 'white';
}
}
//console.log(serie);
//console.log(this.point.y);
//this.point.attr({x:40});
//this.point.y.plotY =50;
//this.point.plotY =-30;
return '<span style="color:' + color + '">' + this.y + '</span>';
},
align: 'center',
color: 'black',
rotation: -90, //set label position vertical
y: -30 // position point
//if value point is > 267, set label position with Y = 30, else Y = -30
}
}
},
series: [{
name: '2017',
data: [275, 270, 276, 265, 271, null],
color: 'purple'
}, {
name: '2018',
data: [260, 265, null, 270, 263, 266],
color: 'green',
lineWidth: 4
}, {
type: 'spline',
name: '2018-Meta',
data: [267, 267, 267, 267, 267, 267],
marker: {
lineWidth: 2,
lineColor: 'red',
fillColor: 'red',
symbol: 'circle'
},
color: 'red'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" class="chart"></div>javascript highcharts
javascript highcharts
asked Jan 2 at 17:29
elunelun
165
asked Jan 2 at 17:29
elunelun
165
edited Jan 2 at 21:57
elun
asked Jan 2 at 17:29
elunelun
165
asked Jan 2 at 17:29
elunelun
165
asked Jan 2 at 17:29
elunelun
165
165
marked as duplicate by ewolden, Community♦ Jan 10 at 1:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by ewolden, Community♦ Jan 10 at 1:30
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Highcharts formatter is a callback JavaScript function to format the data label. So it is not designed to change data label position.
However, you can change data labels position after the chart is loaded using Highcharts.SVGElement.translate method which allows you to translate data label as you like. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (point.y >= 267) {
point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
}
});
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/hdjfbm0t/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Highcharts formatter is a callback JavaScript function to format the data label. So it is not designed to change data label position.
However, you can change data labels position after the chart is loaded using Highcharts.SVGElement.translate method which allows you to translate data label as you like. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (point.y >= 267) {
point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
}
});
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/hdjfbm0t/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
add a comment |
Highcharts formatter is a callback JavaScript function to format the data label. So it is not designed to change data label position.
However, you can change data labels position after the chart is loaded using Highcharts.SVGElement.translate method which allows you to translate data label as you like. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (point.y >= 267) {
point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
}
});
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/hdjfbm0t/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
add a comment |
Highcharts formatter is a callback JavaScript function to format the data label. So it is not designed to change data label position.
However, you can change data labels position after the chart is loaded using Highcharts.SVGElement.translate method which allows you to translate data label as you like. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (point.y >= 267) {
point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
}
});
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/hdjfbm0t/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
Highcharts formatter is a callback JavaScript function to format the data label. So it is not designed to change data label position.
However, you can change data labels position after the chart is loaded using Highcharts.SVGElement.translate method which allows you to translate data label as you like. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (point.y >= 267) {
point.dataLabel.translate(0, -40); // point.dataLabel is a SVGElement
}
});
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/hdjfbm0t/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
answered Jan 3 at 8:17
Wojciech ChmielWojciech Chmiel
2,4861212
2,4861212
add a comment |
add a comment |
