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
- ChartJS automatically scaled chart has undefined min and max
- bower degrades chart.js each time installing other packages
- chart.js not accepting data in dataset which stored in local storage
- Dynamically populate array with Firebase Data Vue.js
- How to replace the data array of my ChartJS
- Chart content not getting displayed in ionic
- How to display stack label/name?
- Vue chartjs is not rendering from API
- How to expand the slice of donut chart in chartjs?
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Call to undefined method App\Charts\SampleChart::labels(), chartjs
- ChartJS changing displayed data based on dropdown selection
- Chart.js: Truncate Legend's Labels
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- Chart.js: Is it possible to get the label of a dataset in a stacked bargraph on clicking it?
- How do I change the appearance of tooltips with mode: index in Chart.js
- Make chartjs pie chart wiyh dynamic data
- Loading multiple doughnut chart from chart.JS in a single component of angular 6
- ng2-charts - bar chart, showing only one color
- setting uneven tick stepsize spacing with chart.js
- Interactive chart via ChartJS
- Chart.js update() method only works once in the end instead of updating every iteration
- Chart.js responsive option - Chart not filling container
- Format X label on mouse hover in chart.js
- Chart.js Undesired Tooltip Showing Up for Legend
- Javascript function to check for missing dates on JSON object
- How to get the X position at a specified chart item index?
- Chartjs - my old data show sometimes, bugs?
- Which is the appropriate lifecycle hook to draw a line?
- Why is chartjs treating these arrays differently?