I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
Related
I've built a Highmaps map where states are colored according to their ranking. I set that up like this:
colorAxis: {
min: 0,
maxColor: 'blue',
dataClasses: [{
from:0,
to: 3.000,
color:'#6497b1'
}, {
from: 3.001,
to: 4.500,
color:'#005b96'
}, {
from: 4.510,
to: 7.000,
color:'#03396c'
}, {
from: 7.001,
to: 10.000,
color:'#011f4b'
}]
},
legend: {
title: {
text: 'Desarrollo democratico',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 3,
symbolRadius: 5,
symbolHeight: 14
},
It works as expected. However, I would like to disable the default behavior in which when you click on a legend category it hides the corresponding states from the map. Generally, this can be accomplished by adding legendItemClick to plotOptions and setting it to return false, as follows:
plotOptions: { //For point links
series: {
events: {
legendItemClick: function (e) {
return false;
}
}
},
However, after several hours of researching its evident that there is a known HighCharts bug that prevents legendItemClick from working when there are dataClasses in the colorAxis object: https://github.com/highcharts/highcharts/issues/9246
There's a workaround in the forum at the previous link, but I haven't had any luck getting it to work. Does anyone out there have a solution for this?
Here's a JSFiddle illustrating the problem: https://jsfiddle.net/sstoker/3cdaqkyx/
As an alternative, if anyone knows how to make legendItemClick highlight the corresponding states rather than hiding them, that would work as well. Many thanks in advance!
To prevent hiding the states, you can overwrite the setItemEvents method:
(function(H) {
H.Legend.prototype.setItemEvents = null;
})(Highcharts)
Live demo: https://jsfiddle.net/BlackLabel/usaveL4w/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
I'm using highchart to show some text next to a plot line on the xAxis. I would like to customize each label from a formatter function as it is possible on every other labels in the chart.
I've seen another topic on this matter but they're using TypeScript and I don't.
What I'm doing is :
vay chart = new HighChart({
...
xAxis: {
plotLines: [{
id: "plotLines",
zIndex: 15,
color: myColor,
width: 1,
value: theXvalue, //x value where to show the line
label: {
formatter: function () {
return " VAL > "+this.value;
}
},
}]
},
...
});
If I set the 'text' value in the label it shows up and it works like a charm.
Any help to use a formatter for those labels ?
Unfortunately you cannot use formatter, you should define content of label in text object, which can be wrapped in html elements, but then you need to set [useHTML(http://api.highcharts.com/highcharts#xAxis.plotLines.label.useHTML) parameter
Set the useHTML value to true and set your html content inside text. Here is an example of how to achieve it http://jsfiddle.net/9mvwpqf3/1/
yAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 100,
label: {
useHTML: true,
text: '<button>Click Me</button>',
},
}]
},
I'm using highcharts in my web application and I was wondering if there's any way to rename a series after the chart hast been created??
Thanks in advance!!
actually, there's a way now. In highchars 3.0 series added a new api, called update:
chart.series[0].update({name:"name u want to change"}, false);
chart.redraw();
it will not only update the series name below the chart, but the name in tooltip as well.
Cheers!
This seems to work :
chart.series[1].name="Renamed";
chart.redraw();
There is no method for doing this in the API. You could remove the series and add it again with another name, but that will make the animations run a second time and I think it will be colored with a new color as well.
It is not required to Redraw chart again
We can include it along with the series option in the Chart declaration as below:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'high_container'
},title: {
text: 'IO Signal Data'
},subtitle: {
text: 'Source: GPS Modem'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime',
labels: {
enabled: true,
formatter: function () { return ddd[this.value][0]; }, //<=== the value to plot chart
}
},
series: [{
data: ddd,
name: SeriesName
}]
});
You can use the following to change the series name:
$(chart.series[0].legendItem.element).children('tspan').text('newLabelName');