I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
Related
Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown
https://codepen.io/SophTooke/pen/ExorZZj
[enter code here][2]
Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
formatter: function() {
let chart = this,
weight = chart.point.weight;
return `Weight: <span>${weight}</span>`
}
},
}
},
Demo:
https://codepen.io/sebastian-hajdus/pen/BarjMap
API References:
https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter
https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML
I'd like to add an extra x-axis label to the end of a chart, like in the image below.
Is this possible?
I've checked out the API but don't see anything about adding or modifying single labels.
Thanks!
You can use the formatter function to customize the labels:
xAxis: {
labels: {
formatter: function() {
if (this.isLast) {
return 'Now'
}
return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5s3gbawr/
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
I'm creating a bar chart with positive and negative values and display the xAxis (category name) of each data point (See Fiddle: https://jsfiddle.net/bej8j/75/).
Here's what I have for plot options but I'm not sure what else I need (Really only putting this code in here because I need to include some code to link to a jsfiddle)
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
enabled: true
}
}
},
I'm trying to place the label so that it's aligned with the start of each bar on the chart. I photoshoped my desired result: http://i.imgur.com/0I1jSHW.png
Any help would be greatly appreciated.
You can iterate on each datalabel and use translate() function to move SVG element.
http://jsfiddle.net/eMjGg/7/
$.each(chart.series[0].data,function(i,data){
position = chart.yAxis[0].toPixels(0);
console.log(data);
if(data.y < 0)
position-=10;
else
position-=70;
data.dataLabel.attr({
x:position
});
});
I think this would help you: http://jsfiddle.net/42dRt/5/
Here's more info: high-charts datalabel position needs to change when value is too small
You must play with the X value:
plotOptions : {
series : {
dataLabels: {
formatter: function() {
return this.x
},
x: ?,
enabled: true
}
}
}
Is there a preferred way to eliminate or aggregate labels below a certain threshold when using HighCharts pie chart? I'd rather not have to rollup all values below a certain percentage into 'other' if I can. I've checked the docs and can't find anything. It would be very useful!
Thanks in anticipation.
The best way to achieve this is to use dataLabels formatter for pie chart like this:
plotOptions: {
pie: {
dataLabels: {
formatter: function(){
if (this.percentage < SOME_VALUE) return "";
return VALUE_TO_SHOW;
}
}
}
}
Replace SOME_VALUE and VALUE_TOSHOW with desired values. But there will be some problems if you're using connector for you labels (it is always visible).
A very late answer to this question:
If instead of returning empty string, you instead return null, the label AND connector will not show, and you'll be able to achieve this effect without removing the connector:
Example: jsfiddle
plotOptions: {
pie: {
dataLabels: {
formatter: function(){
if (this.percentage < SOME_VALUE) return null;
return VALUE_TO_SHOW;
}
}
}
}