score:0
Accepted answer
you can define the option pointbackgroundcolor
on the dataset
. when the user clicks on a point, you recreate pointbackgroundcolor
, but now use an array
that contains the desired color for each point.
please take a look at your amended code below and see how it works.
new chart('mychart', {
type: 'scatter',
data: {
datasets: [{
label: '# of votes',
data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }],
pointbackgroundcolor: '#ddd',
pointradius: 5,
}]
},
options: {
onclick: (event, elements, chart) => {
const dataset = chart.data.datasets[0];
dataset.pointbackgroundcolor = dataset.data.map((v, i) => i == elements[0]?.index ? '#fa6400': '#ddd');
chart.update();
},
scales: {
y: {
beginatzero: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
<canvas id="mychart" width="400" height="200"></canvas>
Source: stackoverflow.com
Related Query
- Change color of a single point by clicking on it - Chart.JS
- How to change color by clicking on the chart bar?
- In chart.js , change color of chart by clicking button
- chartjs datalabels change font and color of text displaying inside pie chart
- Change point size and color on hover in chartjs
- Change point color on click using ChartJS
- Angular 2 chart - change point radius
- Chartjs Radar - Change color of end point labels
- chart.js bar chart color change based on value
- Angular 8 & ChartJs change color in pie chart
- How to set single color on each bar in angular chart js
- Change size of a specific point on a line chart in Chart.js
- Change Axis Line color in Chart created using chart.js
- change stroke line color in chart according to datasets in react native
- How to change color of column in chart js
- PrimeFaces PolarArea Chart - GridLine Color Change
- Change the background color of tooltip dynamically using chart color
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- How to change background color of labels in line chart from chart.js?
- Change background point color at runtime for angular ng2-charts / chartjs
- Chart.js change Color of a Point during runtime
- chart js bar chart add animation to change color
- chart.js bar chart change color based on value
- Chart JS - Change the color of the last element in a Bar Chart
- how to change point style legend to diamond in chart js
- Chart.js Change color of the values *inside* the bars of a Bar chart
- VueJS + Chartjs - Chart only renders after code change
- Cannot change font color and box width in chart
- Cannot change the color of column chart according to its value
- Line chart Change background color of shaded region on hover (Chartjs)
More Query from same tag
- ChartJS: chart not show all data
- Regarding stacked chart in chart.js
- Chart.js title is not showing
- Javascript and Chart.js not taking user input assuming it is a variable scope issue
- Inline plugin doesn't work
- Chartjs 2 scaling lots of data points
- functional component not re-rendering after setState update hook
- Laravel & chartjs blank canvas
- Canvas displays initially in Chrome but not in Firefox
- No rendered annotation line on Line Chart
- Chart.js with JSON empty
- colors are not updated when updating chart
- Chart.js returns a console error and does not display the chart when using variables as data input
- How to implement chart js using viewbag in mvc razor
- ChartJS executes a function multiple times
- Cannot use npm module react-chartjs with React
- Multipe doughnut charts on one page with text in center using Chart.js
- Chartjs not rendering chart and no error thrown
- How to show dynamic dates with month name of current month and previous month in momentjs?
- Chartjs duration horizontal bar chart
- Hiding unused axis in ng2-charts
- chart js different callback labels
- Vertical Line chart with ChartJS
- ChartJS charts not generating within tabs
- chart annotations not showing in Angular 2
- I am not able to show dotted circle for percentage
- Chart.js - How to create a different global configuration between the x axis and the y axis
- Possible to create quadrant chart with ChartJS, with the "origin" centered at a single point?
- Why my ChartJs only Coloring one section?
- Can't find the way to calculate and output it