confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

class not working

Hey.

ts component:

dataLabels: {
useHTML: true,
enabled: true,
formatter: () => {
const color = 'red';
return `<div>
<span class="rn-timeline-label" style="color:${color}">${30} °C</span>\
</div>`;
}
},

css file:

.highcharts-label .rn-timeline-label {
font-family: 'Inter', sans-serif;
font-size: 13px;
text-outline: none;
font-weight: 600;
}


considering this.
When i inspect the label with the devtools, i can se that my class "rn-timeline-label" has been applied. However none of the style configs set in the class are active. Anything im missing here?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: class not working

Hi there,

Highcharts have a lot of inline styles by default - maybe you are trying to set some styles in your "rn-timeline-label" class that are being overwritten by the inline styles (since they have the most "power" in CSS).

I would suggest inspecting that a bit further, to see if such behavior occurs and try to overwrite it with your inline styles, or use !important flag in CSS.

Let me know if that has fixed your CSS issue,
Regards!
Kamil Musiałowski
Highcharts Developer
confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

Re: class not working

Hey. i went with inline styling:)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: class not working

Great to hear that!

In case of any other questions related to Highcharts functionality, feel free to contact us,
Have a good day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Gantt”