Highcharts Stack column issue - javascript

Here is the code link: https://jsfiddle.net/chong789456/a77pj67b/3/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ["c1", "c2", "c3", "c4"],
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
useHTML: true,
formatter: function() {
var tooltip = '';
tooltip = '<b style="color:' + this.point.series.color + ';">Type: </b>' + this.point.series.name + '<br>';
tooltip += '<b style="color:' + this.point.series.color + ';">Clicks: </b>' + Highcharts.numberFormat(this.point.y, 0, '.', ',') + '<br>';
return tooltip;
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
minPointLength: 10
}
},
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,0,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
0,0,0,0
]
},
],
});
I have 4 categories(c1,c2,c3,c4) and 2 series(orange,apple).
The issue is, for category c4, the orange's number is 34 and the apple's number is 0, only apple showns in c4 as you can see in the chart. I want orange shows there and the tooltip should also show something like:
Type: Orange
Clicks: 34
I'm confused that Orange doesn't show in C4 as its clicks is not 0. Anybody can help? thanks tons!
=================================================
I have fixed this issue now! : ) Here is the link:
https://jsfiddle.net/75zk3w08/1/
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,null,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
null,null,null,null
]
},
],
The only different of these 2 examples is the series section. If i set the value to null, then it won't show in the chart.

you can set the yAxis: {min: 0, max: 100}
minimum and maximum of y axis.this will affect y-axis scale As in your example
you are only setting minimum y axis please check the below

Related

Highcharts: Passing a secondary data variable in the tooltip

I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.
Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

numbers are too long to show correctly in highcharts/javascript

I have a weird question:
The series1 variable is an array of date-times, which are too long. Because of this, the chart cannot display correctly. However, if I change series1 to make it contain the values of series2. It will work correctly. Can you let me know what I should do?
Also, how can I get each value in series1 shown as a date? suppose it is a variable from flask {{series1}}. thank you.
$(function () {
var series1 = [1489298400000L, 1492923600000L, 1492318800000L, 1480226400000L, 1494133200000L, 1490504400000L, 1488088800000L, 1475384400000L, 1493528400000L, 1491109200000L, 1480831200000L, 1471755600000L]
var series2 = [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1]
var series3 = [102, 95, 110, 111, 81, 104, 99, 92, 90, 100, 103, 98]
var myChart =
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
credits: {
text: 'Songhuiming',
href: 'http://www.songhuiming.com'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: series1,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
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: 'Rainfall',
type: 'column',
yAxis: 1,
data: series2,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: series3,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
About suffix "L" on the end you can read here.
What you need at first to make all items in series1 array be a string, because as it now, you will have an error. Then remove "L" and convert to dates
let series = ['1489298400000L', '1492923600000L', '1492318800000L', '1480226400000L', '1494133200000L', '1490504400000L', '1488088800000L', '1475384400000L', '1493528400000L', '1491109200000L', '1480831200000L', '1471755600000L'];
let series1 = series.map((item) => {
let date = new Date(parseInt(item.replace("L", ""))));
return `${date.getMonth()} ${date.getFullYear()}`;
});

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/

Highcharts heat map does not work with a wide range of data values (min: 0, max: 5,000,000)

I try to draw a heat map (50 x 100) using Highcharts. I noticed that the the chart is not displaying properly when my data values are in wide range (from 0 to 5,000,000). However, if I change my data values to smaller range (for example from 0 to 1) the chart seems to be okay.
$('#heatmap').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
zoomType: 'xy'
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
title: {
text: 'Sample title yo'
},
xAxis: {
categories: xCategories,
title: null
},
yAxis: {
categories: yCategories,
title: null
},
colorAxis: {
min: min,
max: maxv,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Lorem ipsum',
borderWidth: 1,
data: data,
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
Here's my fiddle: http://jsfiddle.net/bpp8ahyc/4/
Is there anything I can do to show large values?
You need to increase value of turboThreshold or set as unlimited (by 0).
plotOptions: {
series: {
turboThreshold:0
}
}
Example: http://jsfiddle.net/bpp8ahyc/5/

Highcharts multi y-axis min-max issue

I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.
I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.
Any ideas ?
Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/
And here's (some of) the code:
jQuery('#chartContainer').highcharts({
chart: { width: 600, height: 500 },
title: { text: '' },
credits: { enabled: false },
xAxis: {
categories: client_age_array,
title: {
text: 'Client age',
style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
},
labels: {
step: 5,
staggerLines: 1
}
},
yAxis: [{ // First yAxis - Income
labels: {
style: {
color: gradTop,
fontSize: '12px'
}
},
title: {
text: 'Income',
style: {
color: gradTop,
fontSize: '12px'
}
},
opposite: true,
min: null,
max: null
},
{ // Second yAxis - Fund value
gridLineWidth: 0,
labels: {
style: {
color: '#003466',
fontSize: '12px'
}
},
title: {
text: 'Fund value',
style: {
color: '#003466',
fontSize: '12px'
}
},
min: null,
max: null
},
{ // Third yAxis - Survival probability
gridLineWidth: 0,
labels: {
format: '{value}%',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
title: {
text: 'Survival probability',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
opposite: true,
min: 0,
max: 100
}],
tooltip: {
formatter: function() {
var toolTip = '<b>Age : '+ this.x +'</b><br />';
jQuery.each(this.points, function(i, point) {
if( point.series.name == 'Survival probability' ){
if( isNaN(point.y) ){
// -- do nothing
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
});
return toolTip;
},
shared: true
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -5
}
},
series: [
{
name: 'Income',
type: 'column',
yAxis: 0,
data: income_array
},
{
name: 'Fund value',
type: 'spline',
yAxis: 1,
data: fund_value_array,
marker: {
enabled: false
}
},
{
name: 'Survival probability',
type: 'line',
lineWidth: 0,
yAxis: 2,
data: survival_array_2
}
],
colors: [{
linearGradient: perShapeGradient,
stops: [ [0, gradTop], [1, gradBottom] ]
},
'#003466',
'#fe6f01'
]
});
Simply set alignTicks to false for the Survival Probability axis. That's it.

Categories