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
Related
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
I high chart value like 1000000. How can I have it displayed with the proper commas in place like "10,000,000"
I write the regular expression like
/(\d+)(\d{3})/
It working fine for normal function..but when i use this one in High charts then it returns undefined
You can use http://api.highcharts.com/highcharts#Highcharts.numberFormat in formatters like axis label or tooltip. Additionally you have a possibility of using lang paramter http://api.highcharts.com/highcharts#lang.thousandsSep
you can use formatter availabele for labels,xAxis.labels, yAxis,labels, tooltip to format the numbers in your own way.
yAxis:{
labels:{
formatter: function(){
}
}
}
you can use the regular expression concept in that formatter function as well.
here is a example where i've applied my formatting on yAxis labels http://jsfiddle.net/2Jwsn/
I hope this will help you
You can also use "Format String"
For Tooltip:
tooltip: {
pointFormat: "Value: {point.y:,.0f}"
}
For x/y labels:
yAxis: {
labels: {
format: '{value:,.0f}'
}
}
Labels:
plotOptions: {
bar: {
dataLabels: {
enabled: true,
format : '{y:,.0f}'
}
}
}
Is there any way to format yaxis into something I want.
In fact, sometimes on the yaxis the data is shown with (k) on the right instead of thousand.
I want to remove (k). How can I do it?
The image of yaxis I want:
You can use formatter (http://api.highcharts.com/highcharts#yAxis.labels.formatter) and numberFormat() http://api.highcharts.com/highcharts#Highcharts.numberFormat()
http://jsfiddle.net/K2X3Y/
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value,0);
}
}
},
I have a custom chart here
I have set label property as
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
},
align:'center',
x:150
}
I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.
what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.
Here is the way I found it.
Instead of using static values,
I used useHTML, and positioned labels by CSS styles.
labels: {
useHTML:true,
formatter: function() {
return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
}
}
Simple example here
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;
}
}
}
}