Highcharts - when disabled in legend, line label still appears - javascript

I am using highcharts and made this simple line chart. When I turn off the view for a person on the legend the name still appears as a line label on the line chart. Any way I can turn that off? I attached a picture of the problem. I want only Wilson to show.
This is my code:
Highcharts.chart('chart1', {
chart: {
type: 'line'
},
title: {
text: 'Hours vs Month (' + months[0] + "-" + months[5] + ")"
},
xAxis: {
categories: months
},
yAxis: {
title: {
text: 'Hours'
}
},
tooltip: {
valueSuffix: ' hours'
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: true
}
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series :somedata
});

Related

Column rang chart is not getting reset when click on legends in highcharts

I'm tring to achieve,
remove shadow when hovered on column range chart
the chart is not getting reset when clicking on legends in highchart. Please find the link
Example Code JS fiddle
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
},
colors: [
"#105060",
"#1E8199",
"#DB9500",
"#D03D16",
"#8200A3",
"#A60040",
"#3EBEDE",
"#FCAC6B",
"#7FE9CE",
"#FD6FA5",
"#89E3F9",
"#E477FF",
],
yAxis: {
visible: false
},
xAxis: {
categories: xAxisCats,
},
plotOptions: {
series: {
stacking: 'normal',
grouping: false,
showInLegend: true,
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
inside: true,
align: 'center',
formatter: function() {
return this.point.high - this.point.low ? this.point.high - this.point.low : '';
}
}
}
},
tooltip: {
shared: false,
formatter: function() {
const category = this.key + ' : ',
value = this.point.high - this.point.low ? this.point.high - this.point.low : '';
return category + value
// return this.point.high - this.point.low ? this.point.high - this.point.low : '';
}
}...
This is the original graph, when we click on legends(i.e, Dept001) chart not getting reset.
In accition to disabling hover state, disable also inactive state.
plotOptions: {
series: {
states: {
inactive: {
enabled: false
},
hover: {
enabled: false
}
},
...
}
}
Disable ignoreHiddenSeries option:
chart: {
...,
ignoreHiddenSeries: false,
}
Live demo: https://jsfiddle.net/BlackLabel/vn472r18/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.states.inactive
https://api.highcharts.com/highcharts/chart.ignoreHiddenSeries

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 show Day as well as Time in between the days? Multiple data on x-axis Highachrts

I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}

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 variation (%) between yaxis values in tooltip

I have a really simple spline chart and I'm trying to show on each tooltip the variation between the selected point and the previous point's value, measured in percentage variation. Basically this is the tooltip format I want to show
I've been looking for a solution but the only thing I came up with was this.
Hope it helps.
This are my chart options:
GeneralChartOptions = {
chart: {
renderTo: 'dummycontainer',
type: 'spline',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y',
year: '%b'
}
},
yAxis: {
title: {
text: ''
},
plotLines: []
},
tooltip: {
xDateFormat: '%m-%Y',
shared: true,
crosshairs: true,
},
exporting: {
enabled: false
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2,".",",");
}
},
series: []
}
Thanks for the help, I really appreciate it.
How about look how they do and then try ?
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
plotOptions: {
series: {
compare: 'percent'
}
}
demo

Categories