I've created a simple Highcharts scatter plot with three data points. It uses the highcharts-regression plug-in to add a series showing the linear regression line. I would like tooltips to display for the data points but not for the regression line, so I have disabled the tooltip like this:
series: [{
regression: true,
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
],
regressionSettings: {
tooltip: {
enabled: false // <---- I expect this to disable the tooltip
},
}
}]
http://jsfiddle.net/f34mza2q/1/
As you can see from the jsfiddle, the tooltips still pop up for the regression line. How can I turn off the tooltips here (and still keep them for the data points)?
I've tried a couple of other things:
adding a style: 'display: "none"' to regressionSettings.tooltip
setting regressionSettings.enableMouseTracking to false
Neither seemed to have any effect.
UPDATE: Based on ppotaczek's answer below, here's what I did to turn off tooltips for all regression lines on the chart:
Highcharts.chart('mychart', {
// ...
events: {
load: function() {
var trendlines = this.series.filter(c => c.options.isRegressionLine);
for (i in trendlines) {
trendlines[i].update({
enableMouseTracking: false
});
}
}
},
//...
});
This highcharts-regression plugin is not official Highcharts plugin, but please look at the documentation: https://api.highcharts.com/highcharts/series.line.tooltip, you can not disable tooltip for individual series in the way you try. You should use enableMouseTracking property, but it is not supported in regressionSettings. To workaround, you can use update method on created regression series in this way:
load: function() {
this.series[1].update({
enableMouseTracking: false
});
}
Live demo: http://jsfiddle.net/BlackLabel/dt42v3uz/
API: https://api.highcharts.com/highcharts/series.column.enableMouseTracking
as mentioned in documentation HIGHCHARTS REGRESSION the tooltip object fellow the stander configuration of highchart disabling or enabling for the entire chart.
unless you want to search the generated html/css and remove the tooltips with jquery.
Related
Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.
I have found a need to make sure Highcharts is only using 1 yaxis at a time, Basically I typically have about 5-10 series but many do not have the same yaxis measurement.
For instance with air pollution PM2.5 is measured by ug/m3 and most others are by ppm, but there is also ppb.
I want to by default show only ppb series, but if you select a series (from the highcharts legend) that uses for instance ug/m3 then all ppb series will be hidden.
I am having some difficulty defining it so looking through the docs I just can't seem to find any connection to my issue to find a solution, and I really want to avoid trying to force Highcharts to do it when it seems like something that would most likely be supported in some fashion.
What I am mainly looking for is how this might be termed by highcharts that might direct me to the correct portion of the docs, or if not supported by highcharts what I might be able to do to achieve this without over complicating the setup (click events on the legend items, ect).
You can achieve this by using series.events.legendItemClick and hide all other series when enabling one. Useful option is also yAxis.showEmpty which will hide all yAxis elements if extremes are not set.
Demo: http://jsfiddle.net/BlackLabel/aqh5htqt/
Highcharts.chart('container', {
yAxis: [{
showEmpty: false
}, {
showEmpty: false
}, {
showEmpty: false
}],
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (!this.visible) {
// Hide all others
Highcharts.each(this.chart.series, function(series) {
series.hide();
});
} else {
// Prevent hiding the only visible series
return false;
}
}
}
}
},
series: [{
data: [1, 2, 3]
}, {
data: [100, 400, 5000],
visible: false,
yAxis: 1
}, {
data: [5, 10, 15],
visible: false,
yAxis: 2
}]
});
Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?
In my opinion the answer is no.
Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/
I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.
Workaround
This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/
First I added additional two series that have no data:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series.
I created visible flag for every leaf for controlling its visibility.
Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.
legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Update
If you want an animation to happen use addPoint and removePoint instead of setData.
API references:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Series#removePoint
I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.
[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.
I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels
The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}