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}'
}
}
}
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'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
In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner
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);
}
}
},
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;
}
}
}
}