Bar chart label alignment for all the zero values - javascript

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/

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

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

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

how to create scatter dotted graph in php?

i getting issue create dynamic dotted graph in php data fetch data base y-axis data ploat and x-axis date required but getting issue pls give me some hint or google line
i am using this code but x-axis not display date
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[07/07/2004, 51.6], [07/026/2004, 59.0], [08/01/2004, 49.2], [08/26/2004, 63.0]]
}]
}]
}); });

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