score:0
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,
},
}]
}
}
};
score:1
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`;
},
},
},
},
}}
Source: stackoverflow.com
Related Query
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How to create chartjs chart with data from database C#
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to show the chartjs bar chart data values labels as text?
- how to write labels along with data on top and bottom of each stack in bar chart
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- how to show X and Y labels on points in Chart js 2 Line Chart
- Chartjs create chart with big data and fixed labels
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to display Line Chart dataset point labels with Chart.js?
- show label in tooltip but not in x axis for chartjs line chart
- chart js tooltip how to control the data that show
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to display data labels outside in pie chart with lines in ionic
- Show data dynamically in line chart - ChartJS
- How to show data values or index labels in ChartJs (Latest Version)
- ChartJs line chart - display permanent icon above some data points with text on hover
- Angular chart how to show the legend data value by default along with legend name
More Query from same tag
- Change font family of labels in piechart and linechart in chartjs
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- How to export chart.js graph to svg in vue?
- how to add FAHRENHEIT symbol in chart js donut chart
- Ajax automatically placing double quotes around variable data returned in success call
- Inserting and Fetching values from mongodb using nodejs and chartjs
- Chart.js maxBarThickness is deprecated in angular 8
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- How to update Chartjs chart (react-chartjs-2) with dynamic data?
- How to add external scripts and css in latest angular-cli
- How do I change the label and value like 500,000 to 500k in Chart.js?
- chart.js bar chart datalabel vanishes on hovering over chart
- I'm trying to get data from flask app but I get this "Uncaught ReferenceError: _data is not defined"
- Y Axes not displaying properly on Chartjs
- Chartjs yAxes not rendering ticks
- why does my chart.js barograph order by whole numbers and then floats?
- Line chart is showing under bar in combochart in chartjs
- How can I draw lines inside the bars in charts.js?
- Export HTML content with Chart.jscanvases to PDF
- How to change chart.js chart's grid color?
- How to reduce the number of data points displayed in react-chart-js2 (data decimation)
- js error: while trying to display graph using chart.js: Uncaught TypeError: Cannot read property 'call' of undefined
- Custom tooltip styling in Chart.js
- Ionic 3 + Angular 4 + chart.js - loading data from array
- HTML Input Form to a Javascript Variable
- Chart.js - How can i add a legend?
- Charts not being displayed in django app when using Chart.js 3.6 version
- Chart.JS: Show custom labels permanentely on doughnut chart
- Remove excess lines on y axis using chartjs
- Getting rid of Chart.js canvas subpixels