I have a chart similar to the Average Monthly Rainfall demo on the Highcharts web site: http://www.highcharts.com/demo/column-basic
But I want to further split the city data for each month into two sub categories stacked on top of each other Fiddle:
$('#Bar1170hMonthly').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Counts'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Counts'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:f} cases</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
//stacking: 'normal',
pointPadding: 0.2,
borderWidth: 0
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
, series: [
{
grouping:true,
name: '2011: 36',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 19]
}, {
name: '2012: 237',
data: [13, 14, 35, 23, 37, 11, 23, 22, 8, 12, 18, 21]
}, {
name: '2013: 360',
data: [43, 23, 35, 18, 44, 23, 35, 24, 23, 31, 25, 36]
},
{
name: '2014: 112',
data: [[7, 8], [1, 2], [1, 2], 32, 9, 0, 0, 0, 0, 0, 0, 0]
}]
});
For each month for each year I want to split the count into two subcategories a,b and stack on top of each other. Is that possible?
You need to use stacking: "normal" and for each of stacks set stack: "id", where id's must much between. For example: http://jsfiddle.net/7jfcpyo2/4/
{
stacking: true,
stack: 'B',
name: '2014: 112: stack A',
data: [6, 1, 1, 32, 9, 0, 0, 0, 0, 0, 0, 0]
}, {
stacking: true,
stack: 'B',
name: '2014: 112: stack B',
data: [9, 2, 2, 32, 9, 0, 0, 0, 0, 0, 0, 0]
}
The two series above will stack on each other with interfering any other series. You cna have as much stack's as you want to.
Related
im trying to using chartsjs to do a line chart.
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: ['GEN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
data: [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, 15],
label: "CDL",
borderColor: "#3e95cd",
fill: false
}, {
data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
label: "CLA",
borderColor: "#8e5ea2",
fill: false
}, {
data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
label: "CLB",
borderColor: "#3cba9f",
fill: false
}, {
data: [40, 20, 10, 16, 24, 38, 5, 7, 45, 0],
label: "CLC",
borderColor: "#e8c3b9",
fill: false
}
]
},
options: {
responsive: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
},
legend: {
labels: {
fontColor: 'black'
}
}
}
});
This is my code and it works, but my lines dont starting in "absolute position" and theyr position is like this:
chart_image
I dont understand why, can someone help me?
I'm using grouping column in highcharts, I need to show only usage columns in tooltip(shared: true). But I see all grouping column http://jsfiddle.net/8o6umxdp/, I want to see only the values of the columns in this field, not grouped. I'm hiding this legend "showInLegend: false" but this legend is showing in the tooltip.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
grouping: true
}
},
series: [ {
name: 'Tokyo',
data: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0],
grouping: 'tok',
showInLegend: false
}, {
name: 'Tokyo',
data: [1, 0, 3, 0, 4, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'New York',
data: [0, 0, 0, 0, 33, 0, 0, 0, 0, 0, 0, 0],
grouping: 'mew',
showInLegend: false
}, {
name: 'New York',
data: [80, 0, 0, 42, 23, 0, 0, 0, 0, 0, 0, 0],
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
but here only berlin and london, how to hide tokyo and new york
You could replace your pointFormat with a pointFormatter and filter by Series.showInLegend.
For example (JSFiddle):
// ...
tooltip: {
pointFormatter: function() {
if(this.series.options.showInLegend !== false)
return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td><td style="padding:0"><b>'+this.y.toFixed(1)+' mm</b></td></tr>';
}
}
This should mimic your pointFormat style, but allow for more dynamic inclusion.
I have a stacked column chart with three stacks per column. See https://jsfiddle.net/Lfvnraqd/1/
The tooltip shows the numbers for the individual stack as well as the total of all three stacks (i.e. the total of all proceedings per year). This works fine as long as all stacks are shown. But when I hide one or two stacks by clicking on the corresponding item in the legend, the total shown in the tooltip is that of all visible stacks, but I want it to still show the total of all three stacks. If possible without the need to have a separate series for the total numbers.
Is there a way to do that?
Code:
$(function () {
Highcharts.setOptions({
colors: ['#f59000', '#2274c1', '#90aaef']
});
$('#container').highcharts({
chart: {
borderColor: '#cccccc',
borderWidth: 2,
marginTop: 43,
type: 'column'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
tickLength: 20
},
yAxis: {
min: 0,
max: 45,
reversedStacks: false,
tickInterval: 5,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
credits: {
enabled: false
},
title: {
text: 'Number of procedures per year',
y: 18
},
tooltip: {
headerFormat: '<b>Year {point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Resolved before conciliation',
data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
}, {
name: 'Conciliation successful',
data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
}, {
name: 'Expert\'s decision',
data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
}]
});
});
Summing of the points values need to be done manually because the chart operate only on visible data.
Before you set data in the chart, you calculate its sum:
var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
var sums = Object.keys(data1).map(i => {
return data1[i] + data2[i] + data3[i];
});
and access the propert sum in tooltip.pointFormatter
pointFormatter: function () {
return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}
Example: https://jsfiddle.net/Lfvnraqd/2/
I have been trying to get rid of the gap on the left and nothing works. This issues only happens when I add a reverse yAxis on the right. Below is the code I am using:
$(function () {
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('#container').highcharts({
chart: {
type: 'areaspline',
zoomType: 'xy',
},
title: {
text: 'Stats',
},
subtitle: {
text: 'YTD 2013 - 2014',
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
},
yAxis: [{ //--- Primary yAxis
min: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Mds',
style: {
color: '#8dc63f',
}
},
labels: {
style: {
color: '#8dc63f',
fontWeight: 'bold'
}
}
}, { //--- Secondary yAxis
labels: {
formatter: function () {
var mil = '$';
return mil + Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#3fb4ed',
fontWeight: 'bold'
}
},
title: {
text: 'Revenue',
style: {
color: '#3fb4ed',
}
},
opposite: true
}],
series: [{
type: 'areaspline',
color: '#005a84',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
name: 'Goals',
data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
}, {
type: 'areaspline',
color: '#8dc63f',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 4,
name: 'This Year',
data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, {
type: 'areaspline',
color: '#d9531e',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
visible: false,
name: 'Last Year',
data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
}, {
type: 'column',
color: '#3fb4ed',
fillOpacity: 0.2,
yAxis: 1,
zIndex: 1,
visible: false,
name: 'Revenue',
data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
}]
});
});
I have tried every possible solutions out there. Went through API docs and searched every forum. Any help would be much appriciated.
You can set for xAxis:
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
min: 0.5, // remove padding
max: categories.length - 1.5, // remove padding
startOnTick: false, // allow to start not from tick
endOnTick: false // allow to end not at tick
},
Example: http://jsfiddle.net/p2EYM/24/ - turn on Revenue - you will see that first and last column will be cut off.
The reason it is doing this is because, even though the series is hidden on load, you have a column series that needs the width to display. If you just show series "Revenue" you can see it is using that empty space that was there before. You could also play with tickPixelInterval - but for that you need to not use a categorized xAxis.
See this example.
I also set showEmpty to false for both yAxis elements.
If you change the last of series from
type: 'column',
to
type: 'areaspline',
there will be no gaps on left and right side. Do you need type column?
Solution for your problem is answered here Highcharts Remove Space across the x-Axis by user Dusty. You have to setup for x-axis:
min: 0.5,
max: 10.5,
Note: if you turn your column type series to visible: true half of the first and the last column will be cut-off.
Highcharts won't connect points in a line chart series if all the values in the array are 0 when a gradient is used.
Sample Code:
http://jsfiddle.net/p2EYM/20/
This seems to be related to the now closed issue found here. Does anyone know if there is there a workaround for this?
var colors = ['#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'];
var applyGradient = function(color) {
return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
};
//works if you comment this out.
colors = $.map(colors, applyGradient);
$('#container').highcharts({
colors: colors,
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 0,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{ data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20] },
{ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
});
If you move the "colors = $.map(colors, applyGradient);" line to after you call highcharts it should work.
//works if you comment this out.
colors = $.map(colors, applyGradient);
Updated example: http://jsfiddle.net/jQQF5/
This is 'bug' for Highcharts, and in general for SVG, see this.