We Keep Coding

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})

Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

Highcharts: Add multiple colors to area line chart

I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp

You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones

html button not firing event to the required graph container firing to different graph in Highchart JS

i have 2 graph in 2 different div(container1,container2) and have two set of buttons. both set of buttons triggering to the graph 2 only.when 1 click buttons of graph 1 it should change the graph 1 and when i click graph 2 buttons it should change the graph 2. but graph 1 and graph 2 buttons both are triggering to the graph 2 only.
JS fiddle code http://jsfiddle.net/h5t4c8hj/7/
code
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
},
subtitle: {
text: 'plain'
},
xAxis: {
categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
},
series: [{
type: 'column',
colorByPoint: false,
data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
showInLegend: false
}],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
}, function(chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
$('#plain').click(function() {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function() {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'inverted'
}
});
});
$('#polar').click(function() {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});

Yuu have named the two char with the same name
You must use a chart1 for second char and refer to this in update
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart1.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
http://jsfiddle.net/6h9o5m2w/

It's because they have the same variable name. Consider naming them properly
// first chart
var chart1 = Highcharts.chart('container'
// second chart
var chart2 = Highcharts.chart('container1'
then trigger the events you wanted using their respective variables
hope that helps

You declared both charts over the same variable chart. So the latest declared chart overrides the first one. So:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
Becomes:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
You also targeted the same variable on each clickevent:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart.update({
...
});
});
Becomes:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart1.update({
...
});
});
Here is your working fiddle

Bind Highchart to variable, all within a div?

To preface this, I am very new to highcharts/javascript/jquery in general, so I apologize if this is a simple question.
I am trying to bind this highchart to a variable, while keeping the $(div class="chart") element on the outside. This is basically part of a bigger loop that creates a new div for each chart. Is this even possible?
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: 'line',
zoomType: 'xy',
animation: false,
height: 500
},
plotOptions: {
line: { marker: { enabled: false } },
series: {
cursor: 'pointer',
animation: false,
point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
turboThreshold: 0,
}
},
xAxis: {
title: { text: 'Time' }
},
yAxis: {
title: { text: 'Value' }
},
tooltip: {
crosshairs: true,
shared: true,
animation: false
},
title: {
text: 'Housekeeping'
}
});

You could do something like this to store the chart in a variable.
var chartOptions = {
chart: {
renderTo: 'some unique selector for the container',
type: 'line',
zoomType: 'xy',
animation: false,
height: 500
},
plotOptions: {
line: { marker: { enabled: false } },
series: {
cursor: 'pointer',
animation: false,
point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
turboThreshold: 0,
}
},
xAxis: {
title: { text: 'Time' }
},
yAxis: {
title: { text: 'Value' }
},
tooltip: {
crosshairs: true,
shared: true,
animation: false
},
title: {
text: 'Housekeeping'
}
};
var chart = new Highcharts.Chart(chartOptions);`
This will assign a new chart to a variable and render it to the element specified in the chartOptions.chart.renderTo selector.
You would need to add an id (or some other way to select a single element for the chart to render to) to the element. If this is part of a loop you could use a loop index as the id to give each div a unique id and then add the index to the renderTo attribute mentioned above.

highcharts grouping with overflow

I made highcharts for petrol tank(credit prepayment)
I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)
Thanks.
![var options = {
chart: {
type: 'bar',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: \['Credit'\],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: \[{
color:'#89C35C',
name: 'Current Credit',
data: \[10\] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: \[5\] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: \[1\] }\],
};
$('#container').highcharts(options);][1]
Example:
http://jsfiddle.net/2se5q/

you will find all the explanations on this link http://api.highcharts.com/highcharts
To answer your question if you delete only "plotOptions:" You will not find more than the sum of the graphics on a line but starting from 0.
Here : http://jsfiddle.net/2se5q/3/
plotOptions: {
series: {
stacking: 'normal'
}

I made it like this,where type = area
http://jsfiddle.net/2se5q/4/
var options = {
chart: {
type: 'area',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: ['Credit'],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
color:'#89C35C',
name: 'Current Credit',
data: [10,10] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: [5,5] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: [1,1] }],
};
$('#container').highcharts(options);