score:1
Accepted answer
You need to set the hover interaction mode option like so:
options: {
hover: {
mode: 'nearest'
}
}
Working example:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
hover: {
mode: 'nearest'
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Source: stackoverflow.com
Related Query
- Single point on multiple line linear graph with Chart.js
- How to plot a single value with line in line chart graph using charts.js?
- line chart with {x, y} point data displays only 2 values
- How to display Line Chart dataset point labels with Chart.js?
- Line graph with linear timescale in Chart.js
- ChartJS - Line chart issue with only 1 point
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular-chart / line chart with multiple horizontal lines (margins)
- Chart Js update legend boxes of graph with graph line style
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Chart.js -> line chart -> multiple points with the same X
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- React chart2js Line chart with multiple datasets overlapping
- Plot Multiple Line Chart in Ionic 3 with ChartJS
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- How to plot line chart with multiple datas, but only 2 labels?
- Plotting multiple JSON subobjects in Chart.js Line chart ( with Time as x-axis)
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Add data to line chart js dynamically with multiple lines
- Plotting Dashed Vertical and Horizontal lines on line graph for single point
- combo bar line chart with multiple grouped/stacked datasets
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chart.js - Plot line graph with X , Y coordinates
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
More Query from same tag
- Chartjs add and remove data
- Highlight a particular point in chart JS
- Inject html into ng2-chart tooltip to preview image
- Inserting an array in Chart.JS
- Angular Chart.js Multiple Canvas
- Artefacts when showing compact vertical bar chart in chart.js
- Change color of one value in the x-axis charts.js
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- ChartJs functional component does not refresh even when forceUpdate
- How can I do a sensitivity range with chart.js?
- How to increase line chart width in ng2-charts?
- How can I add new data points to an existing chart with chart.js?
- Chartjs Doughnut Chart smooth animation in countdown
- event click only x-axis label chartJS
- Unable to access list elements in Django Webpage
- Chart.js - Toggle visibility of charts
- Using vue-charts.js, I cannot get hoverOffset to work with doughnut
- Different color for each bar in a bar graph in ChartJS and VueJS
- How To get keys(index) of collection in laravel
- angular-chart zero dimensions inside angular-strap panel
- Is it possible to create context menu with chart.js?
- Angular Chart.js Bar Chart
- Chart.js returns a console error and does not display the chart when using variables as data input
- Chart JS Not Displaying Chart
- How can I put my label on the right hand side of my chart in Chartjs
- how to not repeat code while creating multiple charts in chart js
- Chart JS Re-Animate chart with onclick
- How can i get my chartjs to show up graphically?
- Change color of line along labels Chart.js
- How to update the chart dynamically with vue-chartjs?