foxbum.com
https://twitter.com/tangobob
(function($){
$(document).ready(function(){
$('#container').highcharts({
chart: {
type: 'area',
zoomType: 'x',
animation: false
},
legend: {
enabled: false,
symbolRadius: 0
},
title: {
text: ''
},
xAxis: {
categories: [2012, 2013, 2014, 2015, 2016],
tickInterval: 1,
tickmarkPlacement: 'on'
},
yAxis: {
title: {
text: 'Population (millions)'
}
},
series: [{
name: 'Population',
type: 'area',
data: [
{ name: '2012', y: 12, },
{ name: '2013', y: 15,
dataLabels: {enabled: true}
},
{ name: '2014', y: 10,
dataLabels: {enabled: true},
dataLabels: {
enabled: true,
formatter: function() {
return this.value + '%';
}
}
},
{ name: '2015', y: 12,
dataLabels: {enabled: true},
dataLabels: {
enabled: true,
formatter: function() {
return this.value + '%';
}
}
},
{ name: '2016', y: 14,
dataLabels: {enabled: true}
}
],
pointWidth: 25,
zIndex: 5
}]
});
});
});
})(jQuery);
jsFiddle here.
A:
You can use a dataLabels formatter function to return something that doesn't get used as an axis label, but instead as a tooltip:
...
dataLabels: {
enabled: true,
formatter: function() {
return this.value + '%';
}
},
...
You can tweak the % count based on what you want, but I have the year on the top and the % in the middle. This will help the graph line between the y-ticks appear more continuous.
Highcharts also allows for custom texts and values for plotlines and series markers. The documentation for this can be found here.
If you aren't familiar with dataLabels, you should read through this guide: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
A:
You can use tickPositioner for this purpose. Also is possible define each point width instead using pointWidth, like in the code below:
series: [{
name: 'Population',
type: 'area',
data: [
{ name: '2012', y: 12,
dataLabels: {enabled: true,
tickmarkPlacement: 'on',
formatter: function() { return this.y; }}},
{ name: '2013', y: 15,
dataLabels: {enabled: true,
tickmarkPlacement: 'on',
formatter: function() { return this.y; }}},
{ name: '2014', y: 10,
dataLabels: {enabled: true,
tickmarkPlacement: 'on',
formatter: function() { return this.y; }}},
{ name: '2015', y: 12,
dataLabels: {enabled: true,
tickmarkPlacement: 'on',
formatter: function() { return this.y; }}},
{ name: '2016', y: 14,
dataLabels: {enabled: true,
tickmarkPlacement: 'on',
formatter: function() { return this.y; }}},
],
tickPositioner: function(val, data) {
return val + '%';
}
}],
...
},
...
http://jsfiddle.net/g9d4z5h0/3/
Also is possible show labels only on legend:
plotOptions: {
area: {
pointPlacement: 'on'
},
},
DEMO: http://jsfiddle.net/g9d4z5h0/5/
If the goal is to show in red color points below threshold value:
plotOptions: {
area: {
pointPlacement: 'on',
threshold: [25, 75]
},
},
DEMO: http://jsfiddle.net/g9d4z5h0/6/
