We Keep Coding

ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?

I am trying to show a tooltip in Line Chart when a point was hovered. The tooltip will contain 3 data from 3 different data sets and 1 Label only.
Label: Date
Data Sets:
1. Cases
2. Deaths
3. Recoveries
This is the current output of the Line Chart that I made:
In the current output when I hover in one data set it only shows the data of the current data set only. In the image above I hovered the data set Cases.
Here's my current source code (CasesGraph.js):
import React, { useState, useEffect } from 'react';
import axios from "axios";
import Chart from "./Chart";
const CasesGraph = (country) => {
let currentCountry = country.country;
const [chart, setChart] = useState({});
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const res = await axios.get(
"https://corona.lmao.ninja/v3/covid-19/historical/"+currentCountry+"?lastdays=all"
);
setChart({
labels: Object.keys(res.data.timeline.cases),
showTooltips: true,
datasets: [
{
label: "Covid-19 Cases", //CASES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#eb1515",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#eb1515",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#eb1515",
pointHoverBorderColor: "#eb1515",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.cases)
},
{
label: "Covid-19 Deaths", //DEATHS DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#1a1c1a",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#1a1c1a",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#1a1c1a",
pointHoverBorderColor: "#1a1c1a",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.deaths)
},
{
label: "Covid-19 Recoveries", //RECOVERIES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#0ec90e",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#0ec90e",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#0ec90e",
pointHoverBorderColor: "#0ec90e",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.recovered)
}
],
tooltips: {
mode: 'label',
callbacks: {
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index]; //Date
},
beforeLabel: function(tooltipItem, data) {
return '\nCases: ' + data.datasets[0].data[0] +
'\nDeaths: ' + data.datasets[1].data[1] +
'\nRecoveries: ' + data.datasets[2].data[2];
},
label: function(tooltipItem, data) {
return 'Data2: ' + data.datasets[tooltipItem.datasetIndex].cases[tooltipItem.index];
},
},
},
},
);
} catch (error) {
console.log("CasesGraph: "+ error.response);
}
};
return (
<div style={{ position: "relative", margin: "auto", width: "80vw"}}>
<Chart data={chart} /> <!-- CHART COMPONENT -->
</div>
);
};
export default CasesGraph;
And here's my code for Chart.js component:
import React from "react";
import { Line } from "react-chartjs-2";
const Chart = ({ data }) => {
return <Line
data={data}
options={{
responsive: true,
showTooltips: true,
height: '600px',
width: "600px",
hover: {
mode: 'index',
intersect: false,
},
}}
/>;
};
export default Chart;
For more clear illustration of what I am trying to achieve here's the example: Chart.js - Line Chart Tooltip Hover Mode
Notice the tooltip has the two data from the two different datasets.

I have also been facing the same issue with react-chartjs-2 where I was unable to show multiple tooltips for Line Graph. After reading the document and trial and error, somehow I have cracked the solution.
There are three things. Need to configured with right namespace.
1.interaction:
interaction: {
mode: "index",
intersect: false,
}
2. tooltips:
tooltips:{
mode: "index",
intersect: false,
}
3.Hover:
hover: {
mode: "nearest",
intersect: true,
},
Three configuration with correct name will as below in options props.
options={{
interaction: {
mode: "index",
intersect: false,
},
plugins: {
legend: {
display: true,
position: "right",
align: "start",
labels: {
usePointStyle: true,
boxWidth: 6,
},
title: {
display: true,
text: "Chart.js Bar Chart",
},
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
},
responsive: true,
title: {
display: false,
},
scales: {
x: {
type: "time",
ticks: {
autoSkip: true,
maxTicksLimit: 14,
},
time: {
unit: "month",
displayFormats: {
quarter: "MMM YYYY",
},
},
},
y: {
ticks: {
callback: function (value, index, values) {
return `${value} kVA`;
},
},
},
},
}}

Try removing the tooltips in your code and set your code - as is shown in this working jsfiddle I made.
So, the config section should look like this:
// NOTE: "full_data" is the data source (i.e res.data, in your case).
var config = {
type: 'line',
data: {
labels: Object.keys(full_data.timeline.cases),
showTooltips: true,
datasets: [{
label: "Covid-19 Cases", //CASES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#eb1515",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#eb1515",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#eb1515",
pointHoverBorderColor: "#eb1515",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.cases)
}, {
label: "Covid-19 Deaths", //DEATHS DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#1a1c1a",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#1a1c1a",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#1a1c1a",
pointHoverBorderColor: "#1a1c1a",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.deaths)
}, {
label: "Covid-19 Recoveries", //RECOVERIES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#0ec90e",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#0ec90e",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#0ec90e",
pointHoverBorderColor: "#0ec90e",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.recovered)
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
},
}]
}
}
};

Add icon and custom tooltip - y-axis - chartjs

I am building a chart using chart.js. I want to add a fontawesome icon in the label of y-axis.
I tried to add - labelString: 'Range<i class="fa fa-question-circle" aria-hidden="true"></i>', but it doesn't seem to work. On hover of this icon, I want to also add a tooltip.
How can I add this icon?
Here is the code:
var canvas = document.getElementById('myChart');
var data = {
labels: ["Jan", "1", "2", "3", "4", "5", "Feb"],
datasets: [
{
label: "data",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
function adddata(){
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true,
legend: {
display: false
},
title: {
display: false,
},
scales: {
yAxes: [ {
scaleLabel: {
display: true, labelString: 'Range'
},
gridLines: {
drawTicks: false, display: true
}
}],
xAxes: [ {
scaleLabel: {
display: true, labelString: 'Last 30 days'
},
ticks: {
min: 0, max: 15, stepSize: 5
}
}]
}
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
Here is my chart: https://jsfiddle.net/9mg8c6zL/1/

Using the select tag in React and working with state to toggle between datasets with React Charts

I'm using React Charts. I have a line chart and I'd like to be able to switch between 2 sets of data.
Using the tag I made a dropdown. Take a look at a live example:
https://codesandbox.io/s/mm2vnz6869
Go to the dropdown and switch to "Revenue". Notice that it switches to the other set of data as desired. But now try to switch back to "Spend". Notice it does not work.
Why is that? Can someone take a look at my logic and let me know what I'm doing wrong? Thanks.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Line } from 'react-chartjs-2';
let lineData;
const lineDataSpend = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
};
const lineDataRev = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Revenue - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'red',
borderColor: 'red',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'red',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [27, 9, 37, 31, 102, 42, 19]
},
{
label: 'Revenue - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'yellow',
borderColor: 'yellow',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'yellow',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [1, 29, 4, 112, 26, 49, 81]
}
]
};
lineData = lineDataSpend; //init the graph data to 'Spend'
class App extends Component {
constructor(props) {
super(props);
this.changeMetric = this.changeMetric.bind(this);
this.state = {
selectedMetric: 'Spend'
};
}
changeMetric(event) {
this.setState({
selectedMetric: event.target.value
});
switch (event.target.value) {
case 'Spend':
lineData = lineDataSpend;
break;
case 'Revenue':
lineData = lineDataRev;
break;
default:
}
}
render() {
const lineOptions = {
title: {
display: true,
text: 'Account 1 vs Account 2'
},
tooltips: {
enabled: true,
callbacks: {
label: function (value, data) {
console.log('data', data)
const currentLabel = data.datasets[value.datasetIndex].label;
return currentLabel + ': ' + '$' + value.yLabel;
}
}
},
legend: {
display: true
},
maintainAspectRatio: true,
scales: {
yAxes: [{
ticks: {
callback: function (value) {
return '$' + parseFloat(value.toFixed(2));
}
},
stacked: false,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
return (
<div>
<select onChange={this.changeMetric} value={this.state.selectedMetric}>
<option value="Spend">Spend</option>
<option value="Revenue">Revenue</option>
</select>
<div className="row">
<div className="col-xl-10">
<div className="card">
<div className="card-header">
<i className="fa fa-align-justify" />
</div>
<div className="card-block">
<Line data={lineData} options={lineOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
}
render(<App />, document.body);
In addition to this, Is there a way we could show both graphs at once by using checkbox's? For example, if there are two checkbox's spent, revenue and few other options.If we check spent shows spent data on the graph, if we check both boxes or more it shows all those graphs as such. Please help.

Your lineData initialisation to lineDataSpend is causing the issue. If you directly assign a default object to lineData instead of making it hold the object of lineDataSpend, your problem gets solved.
So, if you change line 103,
lineData = lineDataSpend; //init the graph data to 'Spend'
to
lineData = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
}
your problem will get solved. You can test the fix here - https://codesandbox.io/s/3rko469pkm
But even I am not clear as to why your initial assignment is causing problem because the assignment looks perfectly fine. Will have to dig deeper to know the reason behind this issue.

How to hide tooltips with their respective dataset

I'm using charts.js. For my current need, I managed to find a way to configure tooltips to be always visible regardless of the hover event. My problem is that the tooltip visibility does not follow the dataset behaviour. On charts.js, you can click on a dataset in order to remove it from the graph. My graph does that, but the tooltips are still there visible, floating within the graph with no dataset to represent. Is there a way to hide then with the dataset data when the label is clicked ?
Here is an example of the current state of what i said. https://jsfiddle.net/CaioSantAnna/ddejheg0/ .
HTML
<canvas id="linha"></canvas>
Javascript
Chart.plugins.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
ctx = document.getElementById("linha");
var linha = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
responsive: true,
animation: true,
},
{
label: "Second dataset",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,0,0,0.4)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,0,0,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [13, 78, 60, 75, 90, 10, 27],
spanGaps: false,
responsive: true,
animation: true,
}
]
},
options: {
tooltips: {
callbacks: {
title: function (tooltipItem, data) { return "" },
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
var label = data.labels[tooltipItem.index];
return value;
}
}
},showAllTooltips: true
}
});
To reproduce the problem, just click in one of the labels on the top of the graph.
Thanks in advance.

Just to close the question, I ended up changing to amcharts(https://www.amcharts.com/). It has features like the one i was trying to achieve with chart.js and is free to use under a linkware license.
Thanks again.

Chart JS Line insert Picture

Simple Setup:
I have a RoR Application and a ChartJS Line Diagramm.
I want to add a Picture at a specific place but also text.
In the progress of the RoR Application answers of users will show up after time. Later the answer of two people will be shown, who is closer to the Average.
In my case I only need to know how a Picture could rendered inside.
Picture What it should look like
Here is my actual Code:
var points = [];
var data = {
datasets: [{
label: 'Antworten',
data: points,
radius: 6,
borderColor: "#000000",
borderWidth: 2,
backgroundColor: "#FF0000"
},
{
label: "",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [0],
borderDashOffset: 0.0,
showLine: true,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "rgba(1,0,0,1)",
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointStyle: "circle",
pointHitRadius: 10,
data: [{
x: 0,
y: 0
},{
x: 100,
y: 0
}],
borderColor: "#000000",
borderWidth: 5,
backgroundColor: "#FF0000"
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type: 'line',
data,
options: {
legend: {
display: false
},
showLines: false,
scales: {
xAxes: [{
type: 'linear',
gridLines: {
display: false
},
position: 'bottom',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 1,
min: 0,
stepSize: 1
}
}]
}
}
});
};

Found an Answer:
Here my solution
var user_a = new Image();
user_a.src = 'http://i.imgur.com/fwhrCBs.png';
var data = {
datasets: [
{
label: 'Spieler 1',
data: user_a_answer,
radius: 1,
borderColor: "#000000",
borderWidth: 2,
pointStyle: user_a,
}]