score:14
Accepted answer
You can achieve this, by setting pointHitRadius
property to a value of hit distance, for your dataset, like so ...
...
datasets: [{
pointHitRadius: 20,
...
}]
...
Working example
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Rating',
data: [1, 2, 3, 4, 5, 6],
backgroundColor: 'rgba(209, 230, 245, 0.5)',
borderColor: 'rgba(56, 163, 236, 1)',
borderWidth: 1,
pointHitRadius: 20 //set as you wish
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js: Widen hover distance for points
- Chart.js - Hover labels to display data for all data points on x-axis
- Chart JS show multiple data points for the same label
- Chart.js tooltip hover customization for mixed chart
- ChartJs line chart - display permanent icon above some data points with text on hover
- add info for points in line chart (js)
- Chart JS pass in custom data for points
- Chartjs : Can I overwrite bar value on hover for every bar chart
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- getting additional value fields from data source for dx.chartjs doughnut chart
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- How to clear a chart from a canvas so that hover events cannot be triggered?
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart JS - Use time for xAxes
- Chart.js: only show labels on x-axis for data points
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- Detecting hover events over parts of a chart using Chart.js
- Chart.js drag points on linear chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart JS - set start of week for x axis time series
- Problem for display a chart with Chart.js and Angular
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
More Query from same tag
- Chart.js More than 1 charts on same web page
- Chartjs bar-chart does not render when values are equal
- Can i use destroy charts in React.js using Chart.js?
- JSON cyclic object value when posting data in ChartJS
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Charts.js - Display data label only for the last value
- How to make a step line with charts.JS
- Angular - change objects to array and make it listen to on change
- How to make Radar chart's tooltips show "labels" in vue-chartjs?
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- Getting Error regarding :Cannot read property 'length' of undefined
- Vue ChatJS redirect on pointer click
- how to change x-axis line style in chartjs?
- Why are the chartjs tooltip labels always showing the first x-axis label?
- How do I import a csv into chart.js?
- Partitioning radar graph in chart.js by sector
- Could not find elementById on mat-card-content
- ChartJS: Mapping Non numeric Y and X
- How to realize a discontinuous section (jumps) in a continuous line plot with Chart.js?
- Canvas displays initially in Chrome but not in Firefox
- Chart js adding number
- Get string[] in razor view javascript from mvc controller
- Chart.js Timeseries chart - formatting and missing data values
- ChartJS: Update tooltip
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- chartjs is issue with large amount data
- (chart.js v3.5.1) change bar background, label font color on click
- Chart.js 2 - label overlapping
- PrimeNg bar chart how to show a label for the y-axis
- Removing axes lines on chart.js