We Keep Coding

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

how to update a highcart column chart on a button click

i have a column chart, and i need to refresh (redraw) it, on button click.
this is the code i load when i load the page:
function setParetoChart(data) {
$('#liveChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Detail'
},
subtitle: {
text: 'Detail'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Totale Detail'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
cursor: "pointer",
point: {....
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del Totale<br/>Numero Pezzi Scarti: <span style="color:{point.color}"></span>: <b>{point.scarti}</b> '
},
series: [{
name: 'Details',
colorByPoint: true,
data: data
}]
});
}
now, on button click, i get data from an ajax function, that returns an array of objects, in this way;
drilldown: 'var1'
name: 'var1'
scarts: 15,
y; 15
.. and with an array of that objects, i need to redraw my column chart..

This thread might help...
Lazy Highcharts drilldown
The soultion implements lazy drill down highcharts using Ajax.

Highcharts - Show tooltip onClick instead of hover

I have tried the solution at https://stackoverflow.com/a/24206104/5653279 but to no avail as my Highcharts consist of 2 series of data.
Following the above solution returns me the error
Uncaught TypeError: Cannot read property 'category' of undefined
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
tooltip: {
enabled: false,
headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>',
shared: true,
borderRadius: 10,
crosshairs: [true, false] //x,y
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
title: {
text: 'Glucose/Carbohydrate'
},
subtitle: {
text: 'Ratio between Glucose and Glucose'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b',
},
title: {
text: 'Date'
}
},
yAxis: [{ // Glucose yAxis
labels: {
format: '{value}mmol/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Glucose',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Carbohydrate yAxis
title: {
text: 'Carbohydrate',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
},{
name: 'Carbohydrate',
data: carbohydrate,
dashStyle: 'shortdot',
yAxis: 1,
marker: {
enabled: true
}
}
]}
);
});
However, the error would be "solved" if I edit plotOptions as seen.
plotOptions: {
series: [{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}]
},
But still, the tooltip does not show when I clicked on any point.

Solved the issue!
Just changed
this.chart.myTooltip.refresh(evt.point, evt);
to
this.chart.myTooltip.refresh([evt.point], evt);
But the only limitation to this fix is if there's multiple series (e.g. Line A and B) and the data of both series falls on the same X-Axis (e.g. on the same date), clicking on it will only show the tooltip of that particular series's data (if I click on series A's data, the tooltip only shows A's data without B, even though they are sharing the same X-Axis).

Highcharts: X axis, MySQL datetime

I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.

You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.

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);