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
- Always display ChartJS custom tooltips
- How to add arrays to the barChart with chart.js?
- Where is the documention for the chart.js Chart constructor?
- Chart JS data labels getting cut
- Datas put one on each other on chart.js
- Make Chart.js Radar labels clickable
- Chart.js get array of currently visible points on graph
- Chart.js stacked bar ordering depending on value
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- using react js to create a website that could read .csv file and show in chartjs
- Update data from server for ChartJS graph
- chart js Labels and Grouping labels
- Can we have number value on the top of charts bars.?
- Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin
- Wkhtmltopdf does not render Chart.JS 2.5.0 graph
- How to increase space between label and chart area in chart.js
- How to get 2 doughnut charts in one chart (chartjs)
- Laravel trying to display chart on welcome page
- ChartJS add tooltip to a grouped bar chart
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- Display values outside of pie chart in chartjs
- How do i use chartjs in react project properly?
- cannot read property 'yyyx' of undefined
- Uprading to chart.js@3.x with Angular 8
- Chart.js legendcallback
- How to position yAxes labels in chartJS
- react chart js skip zero value month
- Chart.js displays bar as overflown even below the x-axis
- What is self.scale.endPoint chartJs v2.0?
- Chartjs - make line start at ... but maintain x-axis data