score:0
Accepted answer
as discussed in the comments, you could do it like this:
const barchart = ({values}) => {
[data, setdata] = usestate([]);
[hovering, sethovering] = usestate(null);
useeffect(() => {
setdata({
labels: label,
datasets:values.map((value, index) => ({
label:'',
data: value,
backgroundcolor: index === hovering ? '#1690ca' : '#d0e9f4',
hoverbackgroundcolor: index === hovering ? '#d0e9f4' : '#1690ca',
}))
});
},[hovering, values]);
<bar
data={data}
width={100}
height={50}
options={{ onhover: (event,elements) => sethovering(elements[0]._index) }}
/>
}
this will update your data to set the colors of the currently hovered element as you mentioned within your question. you probably have to change it to match your data/setup, but this works for my setup.
hope this helps. happy coding.
Source: stackoverflow.com
Related Query
- Change background color of all charts beside the one hovered
- Setting Common labels and background color common for all the charts in ChartJs
- How to change the color of legend in chartjs and be able to add one more legend?
- Change the background color of tooltip dynamically using chart color
- Change color of one value in the x-axis charts.js
- How to change React chartjs-2 legend click functionality to hide all except the one clicked?
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Chart.js - change the scale background color of Radar type
- How to change the color of Chart.js points depending on the label
- Chartjs change the specific label color in x axis in callback function
- Chartjs hovering over one Chart, shows tooltip across all charts
- ChartJS click on bar and change it's background color
- Chart.js - Color specific parts of the background in a line chart
- unable to add background color to the canvas using jspdf and chartjs
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How to change the label color in chart.js?
- How can I change color of only one column in Barchart using Chart.js
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- How to add multiple background color in line charts
- ng2-charts & chart.js - Change background color
- Chart.js color change of the data points
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- How to change background color in ng2-charts
- Chart.js: How to change the x-Axes background color?
- How to change background color of labels in line chart from chart.js?
- Background color of the graph affects the other graphs too
- Background color of the chart area in chartjs not working
- How to change color by clicking on the chart bar?
- Change background color of label Chart.js
- In ChartJS how do I change the color of a label in the legend?
More Query from same tag
- Pug - Access data from server in pug script(type='text/javascript')
- How to change color by clicking on the chart bar?
- Change Chart.js Legend Text
- How to pass data for stacked chart in vue-chartkick
- How to use output of JSON.parse() as a input of HTML charts' data field?
- Chartjs - keeping 2 graphs aligned side by side
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- Chartjs Different Fill Color For Overlap Area
- Chart.js Line-Chart with different Labels for each Dataset
- How to push element in array in a certain structure
- Angular 2 ng2-charts donut add text
- How to filter shadow or Drop Shadow in Chart.js?
- Adding line over stacked line chart with ChartJS
- chartJS pie chart not updating after axios GET
- Updating chart.js based on selections from dropdown
- Line graph with linear timescale in Chart.js
- 'barradius' for Barchart in ChartJS is not working
- Chart.js Clipping on Top of Line Graph
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- two xAxes horizontal bar chart Charts.js
- Chart Js Data transformation using Javascript
- Chart.js color change of the data points
- White Space in stacked bar using chart.js
- Angular Chart.js Multiple Canvas
- Update Chart using react
- how to highlight bar in ChartJS with onkeyup Input
- How can I have different values for the chart and the tooltip in chart.js?
- Chartjs line graph goes over panel
- problem with chart js pie chart dataset data