Chart js background color changes on click
Multi tool use
Chart js background color changes on click
I have stacked bar in built with chart js. The bar has three rows with the top row background set as white like below.
)
The above works fine and this is how i set
this.barChart.datasets = [
{
label: myLabels1,
data: myData1,
dataLabel: ['', ''],
backgroundColor: ['#FFC500', '#673AB6']
},
{
label: totalLabels,
data: totalData,
backgroundColor: ['#FFFFFF', '#FFFFFF']
}
];
The above works fine as i want it to . The problem occur when i click on the bar . It adds a background color on top of the existing color like below. The bgColor appear like a shadow below because the top row is white hence the shadow.
I have tried everything possible to disable this change all to no avail. I tried playing with the click event of the chart yet nothing works. Please how do i disable such effect? From where does it come from ? Any help would be appreciated.
Chart.js version
"chart.js": "^2.6.0",
"chart.js": "^2.6.0",
1 Answer
1
AFAIK, That is not chart.js adding a background color to your component but rather your browser displaying that you have this area under selection. I don't think this can be resolved unless you disable selection of the chart by adding this CSS to it.
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
I looked through the API docs and it looks like there is no direct way of applying additional CSS to the bars of a chart. Since CSS flows down HTML heirarchy you can add the class to a parent div that holds the entire chart. This will have the downside of making your chart unselectable, however.
– ManavM
Jul 2 at 9:58
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thank you for the answer, but it doesn't seem to disable the select . I copied the above to mycomponent.scss .
– Nuru Salihu
Jul 2 at 9:01