score:0
Accepted answer
the key point is to address the correct properties in the chart configuration when changing the data. these are basically chart.data.datasets[0]backgroundcolor
, chart.options.scales.x.ticks.color
and chart.options.scales.x.ticks.font.weight
.
please take a look at your amended code below and see how it could work.
new chart("barchart", {
type: 'bar',
data: {
labels: ["jan", "fab", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"],
datasets: [{
label: 'data',
data: [8, 2, 3, 0, 5, 2, 2, 0, 0, 6, 10, 2],
backgroundcolor: 'rgb(197,197,197)',
borderradius: 6,
borderskipped: false,
barthickness: 20
}]
},
options: {
onclick: (event, elements, chart) => {
if (elements.length) {
const dataset = chart.data.datasets[0];
dataset.backgroundcolor = [];
const ticks = chart.options.scales.x.ticks;
ticks.color = [];
ticks.font.weight = [];
const i = elements[0].index;
for (let i = 0; i < dataset.data.length; i++) {
if (elements[0].index == i) {
dataset.backgroundcolor[i] = 'rgb(32,32,32)';
ticks.color[i] = 'rgb(32,32,32)';
ticks.font.weight[i] = 600;
} else {
dataset.backgroundcolor[i] = 'rgb(197,197,197)';
ticks.color[i] = 'rgb(153,153,153)';
ticks.font.weight[i] = 400;
}
}
chart.update();
}
},
scales: {
y: {
display: false
},
x: {
grid: {
color: 'white',
drawborder: false
},
ticks: {
color: 'rgb(153,153,153)',
font: {
family: "'pretendard', sans-serif",
weight: 400
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
<canvas id="barchart"></canvas>
Source: stackoverflow.com
Related Query
- (chart.js v3.5.1) change bar background, label font color on click
- ChartJS click on bar and change it's background color
- Angular-chart.js click on bar and change it's background color
- chartjs datalabels change font and color of text displaying inside pie chart
- Chart.js bar chart : Grid color and hide label
- chart.js bar chart color change based on value
- Chart js background color changes on click
- 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 color of label Chart.js
- 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
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- Chart.js Change color of the values *inside* the bars of a Bar chart
- How can I change the background colors of a bar chart after it has been created?
- Chart.js bar chart change the label position X-axis
- How to change bar color acording to label value in chartjs
- Cannot change font color and box width in chart
- Chartjs Bar Chart add background color to value labels
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- Line chart Change background color of shaded region on hover (Chartjs)
- How to change label color of ng2 chart in angular
- Change Chartjs label color on click without losing hover
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Change Vertical Line and Color bar chart in bar chart.js
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart area background color chartjs
More Query from same tag
- Why is my chart not working? What am I missing
- Chartjs / Javascript - My function not returning array properly, but console logs okay
- refresh chart data every second javascript
- How to change number to $ with commas? Chart.js
- what is wrong with my code ? java script chart position
- How can have variable data be from a url in javascript
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- Chart js: how can I align the legend and the title
- Chart.js with data from database
- How to create a stacked graph using ChartJS
- How do I prevent the scale labels from being cut off in chartjs?
- Chartjs 3 ToolTip styling is not being picked up
- Chartjs graphs are not respecting height of container
- Data Labels on top of points in line charts
- Add a text as tooltip for each point on a line chart
- Create chart in SPA(Aurelia) with MVVM pattern
- ChartJS multiple annotations (vertical lines)
- Chart.update is not a function typeError
- how to populate my chartjs piechart dynamically
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding
- Chart.js Line, different fill color for negative point
- Multi- Line title in chart.js not working
- Why Chart.js's tooltip appears in wrong position when mouse hover?
- How to append text or symbol to tooltip of chart.js
- How to get fixed legend and tooltip for dynamically generated data vue-chartjs
- Plot bar graph in reactjs
- charts disappear if rendered in hidden divs
- How to create stacked bar chart using react-chartjs-2?
- ReactJS - Loading data using Axios + chartjs
- Chart.js Treemap Custom text