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);
}
}
},
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'm just wondering can anyone tell me how I'd go about formatting my x-axis labels on my highchart?
I've set min:0 and max:300 but I want to trim the last digit on the min and max. i.e 280 would become 28.
The code I thought would work was:
labels: {
formatter: function () {
return this.value.substring(0, 3);
}
}
But that seems to crash the highchart. Any Ideas?
this.value is a number, not a string. You could convert to a string and then take a substring.
xAxis: {
labels: {
formatter: function () {
return this.value.toString().substring(0, 2);
}
}
},
But, it's not a very robust solution. If your numbers grow above 999, you'll still only get the first 2 digits. I think you'd be better off with something like this:
xAxis: {
labels: {
formatter: function () {
// return this.value.toString().substring(0, 2);
return Math.round(this.value/10);
}
}
},
Also, be aware that you will have to do this same transformation to tooltips and point labels. It might make more sense to transform your data, than to transform all the ways highcharts talks about your data.
http://jsfiddle.net/3y8dnh5u/2/
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}'
}
}
}
I'm pretty clueless at this point, on some of my charts I am giving these options:
var plotOptions, yAxis;
plotOptions = {
series: {
compare: 'value'
}
};
yAxis = {
labels: {
formatter: function() {
return this.value;
}
},
plotLines: [
{
value: 0,
width: 2,
color: 'silver'
}
]
};
And the chart still displays percentages in the y-axis, just without the % sign. I did a console.log of 'this' in the formatter tag, and the value attribute is correct (that is, returning the value instead of a percentage, but it doesn't seem to be applying it to the chart. Any thoughts?
I actually just ended up using a spline chart instead. Basically what I was trying to say was that the y-axis was displaying the same values where I used "compare: 'percentage'" or "compare: 'value'", but the spline chart seems to be rendering the labels as the actual data points (4000 as opposed to 25%).
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;
}
}
}
}