jpanda
Posts: 5
Joined: Fri Aug 21, 2020 12:36 am

remove inline style for chart container

Hi,

I recently changed our charts to use styledMode to remove all inline styling, but I noticed that the chart's container seems to still have overflow: hidden styled inline. Is there any way to prevent this other than the way pawelfus mentioned in https://github.com/highcharts/highcharts/issues/11089 ?

fiddle:
can look at the style for div with id 'container' in devtools
https://jsfiddle.net/gh/get/library/pur ... ing-style/

Many thanks in advance!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: remove inline style for chart container

Hello jpanda!

We appreciate you reaching out to us!

Besides chart.events.load we can also modify CSS manually in afterGetContainer event as you see in this demo: https://jsfiddle.net/BlackLabel/a256bdfq/

There are no other ways to do it.

Best regards!
Dominik Chudy
Highcharts Developer
pmeaney-sqrt
Posts: 1
Joined: Wed Aug 10, 2022 4:18 pm

Re: remove inline style for chart container

Hello,

I am experiencing a strange issue where white text shows up in two anomalous locations, whereas most of the text is showing up black, as expected given the css rules I have defined. Could someone please help me understand how to ensure all text strings are black, rather than two strangely showing as white?

I have this defined in my external css stylesheet:

Code: Select all

tspan {
  fill: black;
  stroke: none;
  stroke-width: 2px;
  stroke-linejoin: round;
}
And yet, I am seeing this-- Am example where only two text strings are white, for some strange reason-- "Sedans" and "Cargo Van SE".

The css above properly affects most of the text, except for those two elements.
Screen Shot 2022-08-10 at 11.20.29 AM.png
Screen Shot 2022-08-10 at 11.20.29 AM.png (129.46 KiB) Viewed 573 times

I find it strange that two elements are unaffected. On closer inspection, their inline style has an RGB color of white defined, whereas the rest have an RGB color of black defined.
white text.jpg
white text.jpg (49.79 KiB) Viewed 573 times
black text.jpg
black text.jpg (65.25 KiB) Viewed 573 times
I tried to fix the issue with the afterGetContainer functionality... but I am not sure how to use it to target specific css elements.

Does anyone suggest how to do this?

Code: Select all

(function(H) {
  H.addEvent(
    H.Chart,
    'afterGetContainer',
    function() {
      H.css(this.renderTo, {
        "tspan": {
          "fill": "black",
          "stroke": "none",
          "stroke-width": "2px",
          "stroke-linejoin": "round",
        }
      });
    }
  )
})(Highcharts);
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: remove inline style for chart container

Hello pmeaney-sqrt!
Welcome to our forum and thanks for contacting us with your question!

The behaviour you are experiencing is the default way of acting of dataLabels. By default, in Highcharts Core dataLabels font color is set to contrast, based on its background. In your case, the color of the points (where the font color is white) is a shade of black, so the font color became the contrast color. To avoid this behaviour all you need to add is of dataLabels font color :) You can check the simple demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/g5zhb0x6/
API Reference: https://api.highcharts.com/highcharts/s ... bels.color
https://api.highcharts.com/class-refere ... ject#color

Let me know if you have any further questions!
Best regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”