how to add comma between the digit (as a label ) - javascript

I am working on high chart .I want to add comma between the digit (as a label ).I am using high chart
http://jsfiddle.net/xpLgj7n5/
As shown in image there is gap between 0 and 7 .I understand this , it is because number represent the thousand. I need to add comma between them ",".I need to display numbers like this "10,700" when I change the data nothing happen
I change the data like this
data: [10,700, 31,00, 63,500, 20,300, 2,000]
nothing happen.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10700, 3100, 63500, 20300, 2000]
}]
});
});

Refer to documentation
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Fiddle

That may work, but this also works:
plotOptions: {
line: {
dataLabels: {
enabled: true,
format: '${y:,.2f}'
}
}
}
$ - for dollar sign
Y - for y axis
, - adds a comma where a space would be
2f - two digits after decimal point
ex: format: '${y:,.2f}' would show up as $10,000.00

Related

Why is the first data on highcharts not like the others

Why the first and last category shows only 3 pieces of data?
Normally there must be five.
The others seem normal.You can see the result from the picture.when I don't use height property it gives the same result
jsfiddle
ımage
chart: {
type: 'bar',
height: ((data.categories.length ) * 200) + 'px',
},
title: {
text: ''
},
xAxis: {
categories: data.categories,
title: {
text: null
}
},
yAxis: {
title: {
text: 'Puan',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: data.drivers
Change the pointPlacement to 0 in your data in jsfiddle for all the series and it is working fine again. Setting it to on creates a padding which hides part of the chart. Read up on it here.

Highcharts (JavaScript): Change color of column if condition is met

I want to create a dynamic chart that shows all bars in the same color except for the person, who looks at it (in this case: The person who is represented by Afrika, Amerika, etc. Do you have any idea how to do it (in an easy way)?
Thanks in advance!
Highcharts code from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
});
You can simply set color for the point in data:
Highcharts.chart('container', {
series: [{
type: 'bar',
data: [43934, {
y: 52503,
color: 'red'
}, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
If you want to change the color depending on some condition, you can use update method for point, for example in load event:
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.y > 8) {
p.update({
color: 'red'
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4ucx3skh/
API: https://api.highcharts.com/class-reference/Highcharts.Point#update

Bar chart label alignment for all the zero values

I am using high-chart library for bar chart. Everything is working fine except one thing.
When all the values in bar are 'ZERO', the alignment has changed into right side. I want to make it left align. For any non zero values it's working as expected.
Here is the Fiddle
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
align:'left'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [0, 0, 0, 0, 0]
}]
});
Any help would be appreciated.
If all values are 0, then max can not be calculated, so Highcharts will render values in the middle. You can force labels to be rendered on the left by setting yAxis.max or yAxis.softMax, demo: https://jsfiddle.net/BlackLabel/mvp1ebsj/1/

Convert the y-axis values to Millions in dual axis high charts

I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.
This is my FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
Here I have rounded up where I want to make changes in the below figure
You need to make a use of formatter:
formatter: function(){
return this.value/1000000 + "M";
}
Fiddle
To utilize the built in "shortening" functionality you can just remove your yAxis.label.format. You have currently set it to {value}, which is the default, but manually setting it seems to prevent the metric prefixes from being applied.
Look at this JSFiddle example, where all I've changed is removing the following line from both of your y-axis labels:
format: '{value}'
With this automatic shortening the following metric prefixes may be applied:
[ "k" , "M" , "G" , "T" , "P" , "E"]
You can set your own values with the lang.numericSymbols option (API).

HighCharts: How to put the xAxis category text inside the chart

I'm working with Highcharts and I'm not being able to accomplish something. Here is what I want:
As you can see, the text for each bar is on top of the bar.
Here is the version that I've been working on:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
},
xAxis: {
categories: ['Intellectual Property', 'Antitrust/Competition'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Approved spend',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 2013',
data: [6000123, 3743653]
}]
});
});
JSFiddle: http://jsfiddle.net/WcKvz/1/
As you can see, I'm only having the text in the left side of the bar and I can't get it right.
Any ideas? Thank you
The only way I've seen this work is with stackedLabels. You can use them even if you aren't using stacked bars since you only have one series.
...
plotOptions: {
bar: {
stacking: 'normal'
}
},
yAxis: {
stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},
...
http://jsfiddle.net/NVypa/

Categories