Can't Change Chart Data Label Text Color

edited June 13, 2019 in Questions
So, pretty simple. I have a chart and it's got data labels. According to the colors of the chart, I want the data label text to display in white. The trouble is a bit of text in skuidtheme.css that I can't seem to be able to do anything about.

.sk-chart-standard .highcharts-data-labels tspan {
color: #000;
fill: #000;
}

There doesn't seem to be anything I can do to affect this - it appears in the new, default themes. Setting a data label color on charts in the theme does not affect the rendering of the text. Using the Highcharts API to specify data label color does not affect the rendering of the text.

Why is this style element everpresent? Is this just something in my environment?

Thanks,

David

Comments

  • edited June 11, 2019
    Having played with this some more and realizing that there are some timing issues with changes to themes, I've narrowed down the problem:

    While I CAN specify a data label text color in the theme, I can't specify none/null/blank. The 000 color is put in for me and I can't seem to override this. The default behavior also overrides the Highcharts style specification which is super no-bueno.
  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited June 11, 2019
    which version of skuid?
  • edited June 12, 2019
    Oof. Looks like I'm running 11.0.2. I do have an instance running Millau and I'll give it a try sometime later today.
  • edited June 12, 2019
    Horrific workaround: manually removed the offending text from the css in the static resource.
  • Arne-Per HeurbergArne-Per Heurberg ✭✭✭✭
    edited June 12, 2019
    have you tried a preload snippet to set palette?
  • edited June 13, 2019
    I attempted to use the highcharts method to attempt to set the color, essentially:

    $.extend(true, chartObj.plotOptions,{ 
        bar: {
            dataLabels: { 
                enabled: true, 
                style:{
                    color: "white"
                }
            } 
        } 
    })

    And it appears to set the CSS style on the text of the data label as white. Of course, the browser plows over this and implements the .sk-chart-standard .highcharts-data-labels tspan style in the skuidtheme.css applied on the parented div over the highcharts style.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!