0
273
ViewsHow to make label in highcharts area graph display absolute values instead of negative values?
Using this chart as an example, I want to make it so that the value "-3" is an absolute value, but I still want the graph to be going down. It seems highcharts requires the value to be negative to make the graph actually go down. Is there a way around this? 
Below is the configurations cdoe:
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
·
Juan Pablo Isaza
1 answers
Answer question0
But what is the sense of creating this kind of chart? If the value goes down, must be lower than other values otherwise, the readability is fake... Of course, it is possible to achieve it by doing some custom changes in the output:
tooltip: {
formatter() {
return `${this.series.name}: ${Math.abs(this.y)}`
}
},
yAxis: {
labels: {
formatter() {
return Math.abs(this.value)
}
},
},
Demo: https://jsfiddle.net/BlackLabel/u68tb5od/
API: https://api.highcharts.com/highcharts/yAxis.labels.formatter
API: https://api.highcharts.com/highcharts/tooltip.formatter
·
Juan Pablo Isaza
Report
Answer question