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.
Related
im working on switch between the highchart, i have written some code but it doesnt work when i click on switch above the particular chart should replace the chart with datatable.
JsFiddle Link: jsfiddle.net/GnanaSagar/psnh87ud/61/
Html file with js code used:
function switchToDataTable(id) {
var chart = $('#' + id).Highchart(),
chartDiv = $(chart.renderTo);
if (chartDiv.is(":visible")) {
chartDiv.hide();
if (!chart.dataTableDiv) {
chart.update({
exporting: {
showTable: true
}
});
} else {
$(chart.dataTableDiv).show();
}
} else {
chartDiv.show();
$(chart.dataTableDiv).hide();
}
}
Highcharts.chart('chart1', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
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
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
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]
}]
});
Highcharts.chart('chart2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
legendType: 'point',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
Highcharts.chart('chart3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
legendType: 'point',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.0.2/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart1')">Switch</button>
</div>
<div class="panel-body">
<div id="chart1" style="height: 342px;"></div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart2')">Switch</button>
<div class="panel-body">
<div id="chart2" style="height: 342px;"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<button onclick="switchToDataTable('chart3')">Switch</button>
<div class="panel-body">
<div id="chart3" style="height: 342px;"></div>
</div>
</div>
</div>
im working on switch between the highchart, i have wrote some code but it didnt working when i click on switch above the perticular chart should replace the chart with datatable.
The way you're fetching the chart is wrong.
You should replace this:
var chart = $('#'+id).Highchart()
With this:
var chart = $("#" + id).highcharts();
I am trying to hide column having zero value and more than one series. Giving null is not working for me as it is giving space in between which I don't want. As example of my data please refer the link. I am having similar kind of data.
Example of data : http://jsfiddle.net/7dgd3aa7/1/
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
}
},
series: [{
name: 'Tokyo',
data: [49.9, 0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
name: 'New York',
data: [83.6, 78.8, 98.5, 0, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
},{
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 0, 51.2]
}, {
name: 'Berlin',
data: [42.4, 0, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 0, 46.8, 51.1]
}]
});
This look and behavior can be achieved by disabling grouping, creating an individual series for every point and applying pointPlacement to them. pointPlacement can be used only for series objects - that's the reason of this decomposition.
Here's a code that'll do it automatically:
load: function() {
var newSeriesArr = [],
chart = this,
groupedSeries = {},
pointOffset;
// create a new series for each point
for (var i = chart.series.length - 1; i >= 0; i--) {
var series = chart.series[i];
var pointsInSeries = series.points.length;
for (var j = pointsInSeries - 1; j >= 0; j--) {
var point = series.points[j];
// omit the point if its y value equals to 0
if (!point.y) {
continue;
}
// make sure that x property of each point is initialized
point.options.x = point.x;
var newSeriesOptions = {
data: [point.options],
// move relevant options from the original series
color: series.color,
name: series.name,
// linking series items in legend
linkedTo: series.options.id
};
if (!groupedSeries[point.x]) {
// create group
groupedSeries[point.x] = [];
}
// create series and assign it to group
groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));
if (groupedSeries[point.x].length > maxGroupedColumns) {
// update max grouped columns number
maxGroupedColumns = groupedSeries[point.x].length;
}
point.remove(false);
}
//series.remove(false);
series.setData([]);
}
// handle pointPlacement for each series
pointOffset = 1 / maxGroupedColumns;
for (var x in groupedSeries) {
var group = groupedSeries[x];
group.forEach(function(series, index) {
series.update({
pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
}, false);
});
}
chart.redraw();
}
Live demo: http://jsfiddle.net/BlackLabel/1czqor6m/
I have a series from Jan - Dec, the requirement is to update the last data point to grayscale colors. So I have created additional data series assigning grayscale colors to the series. Can I be able to join the colored series with grayscale colored series
http://jsfiddle.net/hgj7sfhp/33/
for example, London colored and London grayscale should be joined, like continuouss series after November, without any break in the series. I have London & Berlin in December points in the chart, but i wanted to attached to the colored series, is it possible ?
Also group the legend of colored series and grayscale series.
London, Berlin
LondonGray, BerlinGray
$(function () {
var grayblue = '#1D1D1D';
var grayred = '#4C4C4C';
dataLondon = [ 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 45.6, 90.4];
dataBerlin = [ 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 23.6, 29.1]
highcharts(dataLondon, dataBerlin, 0);
function highcharts(dataLondon, dataBerlin, number) {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
plotBands: { color: 'Red',
from: 10.5,
to: 10.55,
label: {
text: 'I am label'
}
}
},
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
},
colors: ['#0000FF', '#FF0000'],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'London',
data: dataLondon
}, {
name: 'Berlin',
data: dataBerlin
}, {
name: 'London',
data: [null,null,null,null,null,null,null,null,null,null,null,10],
color: '#1D1D1D'
}, {
name: 'Berlin',
data: [null,null,null,null,null,null,null,null,null,null,null, 51.1],
color: '#4C4C4C'
}]
});
}
});
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.
I'm building a stacked column chart using highcharts which shows data by month over a 24 month period which will often go over three years.
My current code is as follows:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr', 'Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr']
},
yAxis: {
min: 0,
title: {
text: 'Total investments'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Bad',
data: [90000, 100000, 110000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'OK',
data: [0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0]
}, {
name: 'Good',
data: [250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000, 250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000]
}]
});
});
JSFiddle of my current set up is here and hoping someone can how I'd be able to wrap each group of months in their relevant year as shown in this image:
You can use extension, which allows to group categories.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories