yogeshc007
Posts: 2
Joined: Thu Jun 30, 2022 1:27 am

Stacked Column Chart-- Need to apply transparency programmatically.

Hi,
I am working on highcharts Stacked Column chart and need to apply transparency on some columns/bar whose stack total is greater than specified value :
Stacked Column Example referred :
https://jsfiddle.net/gh/get/library/pur ... mn-stacked

How can we apply transparency or opacity on some columns based on some condition.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Stacked Column Chart-- Need to apply transparency programmatically.

Hi there,

I have made a simple demo for you, where we iterate over each point, in each series. Then, we check the total property (which is the total stacked column/bar value). After that, based on a simple if statement, we change the CSS opacity on that specific point.
DEMO: https://jsfiddle.net/BlackLabel/sbkep0uo/
API Reference: https://api.highcharts.com/class-refere ... lement#css

Let me know if that is what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
yogeshc007
Posts: 2
Joined: Thu Jun 30, 2022 1:27 am

Re: Stacked Column Chart-- Need to apply transparency programmatically.

Thanks for the solution. It was exactly what I was looking for. Could u also point me to some demo code where the callbacks are written in Angular TS files and that what is the best way to update charts for specific properties .
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Stacked Column Chart-- Need to apply transparency programmatically.

I'm glad that you are satisfied with the solution!

In terms of Angular, I'd suggest looking into these sources:
GitHub: https://github.com/highcharts/highcharts-angular
DEMO: https://stackblitz.com/edit/highcharts- ... %2Fmain.ts
https://stackblitz.com/edit/highcharts- ... mponent.ts

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”