score:14
to change the data point's color and size on hover, you'll need to set pointhoverbackgroundcolor
and pointhoverradius
property (as needed) respectively for the dataset, like so ...
datasets: [{
...
pointhoverradius: 5,
pointhoverbackgroundcolor: 'red'
}]
ᴅᴇᴍᴏ
var ctx = $('#chart');
var mylinechart = new chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: '# of votes',
data: [1, 2, 3, 4, 5],
fill: false,
pointhoverradius: 5,
pointhoverbackgroundcolor: 'red'
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart"></canvas>
score:6
answering an old thread as accepted answer didn't work for me for bar-chart using chartsjs. may be that was older version or the question was not for bar-chart, not sure. the following works on v2.8 for bar-chart:
hoverbackgroundcolor: 'red',
hoverbordercolor: 'blue',
hoverborderwidth : '3'
ref1 : https://www.chartjs.org/docs/latest/charts/bar.html#interactions
ref2 : https://www.chartjs.org/docs/latest/configuration/elements.html#point-configuration
hoping it may help someone like me.
Source: stackoverflow.com
Related Query
- Change point size and color on hover in chartjs
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Change font size and font color in Chartjs Angular 5
- how to change size of point in ChartJS
- chartjs datalabels change font and color of text displaying inside pie chart
- Change point color on click using ChartJS
- How to change the color of legend in chartjs and be able to add one more legend?
- Chartjs Radar - Change color of end point labels
- ChartJS click on bar and change it's background color
- Change style of hover and tooltip in chartjs or ng2-charts
- Change background point color at runtime for angular ng2-charts / chartjs
- Can't change the default color and font size of labels in react-chartjs-2
- ChartJS - Size of the point doesn't change
- Chartjs disable color change on hover withouth disabling tooltips
- Change Chartjs label color on click without losing hover
- Chartjs change grid line color
- ChartJS - Different color per data point
- Change X and Y axis font color
- Change color of X and Y axis values in Chart.js
- chartjs show dot point on hover over line chart
- how to change background in chartjs and remove background lines?
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Chartjs change the specific label color in x axis in callback function
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Changing color of specific chartjs point
- ChartJS -- How do I change scale color when I have to scales?
- Angular 8 & ChartJs change color in pie chart
- unable to add background color to the canvas using jspdf and chartjs
- Removing ChartJS 2 border and shadow from point style legend
- Change size of a specific point on a line chart in Chart.js
More Query from same tag
- Horizontal overlapping of bars, not whole graph
- Hiding labels on y axis in Chart.js
- Chart.js multiple datas between labels
- Chart.js - Hover labels to display data for all data points on x-axis
- downhole chart - recharts or chart.js or anything else?
- How to create a Doughnut chart in django admin interface using foreign key field data?
- How to change the color of Chart.js points depending on the label
- chart.js filltext object moved when tooltip is generated because of legend not displaying
- Map with pie chart and label
- Chart.js: how to listen to hover/click events outside of plot area?
- Plot time on Y axis
- Customization of Data Labels in doughnut chart ng2-charts
- Angular charts not working with Angular 5, Showing below error attached screen shot
- How to customize border style on Chart.js
- How to import Chart.js with Webpack
- Chart.js - Is it possible to have two y axis with positive values one above the other?
- colors are not updated when updating chart
- ChartJS get data from Controller
- Better looking function
- How to align Chart.JS line chart labels to the center
- How to get a square grid in Chart.js with responsive scatter chart?
- Usage for angular-chart : colors and fonts
- Chartjs extended doughnut with text tooltip issue
- Chart.js 2 How will I put the dataset inside the bar if it is near the TOP?
- ChartJs in ionic Framework
- Do not rotate scale title at xAxis
- HTML5 chart stacked bars with repeated colors
- chart.js-datalabels-plugins don't work
- how can we use function of one component into another js file
- Chartjs and ChartDataLabels does not work in mdb5 pro version 2