Chart dark background

[ltf-space]

Screenshot

Description

After the background color is changed to a dark color, the color of the coordinate axis is dark. How can I change the color of the coordinate axis to white?

Design input

I hope there is a way to solve this dark style problem, has anyone encountered this problem?

[dosubot[bot]]

Hey @ltf-space! 👋 I'm here to help you out with any bugs, questions, or contributions you have. Let's tackle this together!

I found a similar unsolved discussion that might be relevant to your issue: Timeseries chart y/x-axis label color ^[1].

To change the color of the coordinate axis to white after changing the background color to dark in a line graph, you need to modify the axis styling in the updateAxes function. Specifically, you should set the stroke color of the axis to white.

Here is the relevant part of the code with the necessary modification:

pc.updateAxes = function () {
    var g_data = pc.svg.selectAll('.dimension').data(__.dimensions);

    // Enter
    g_data
      .enter()
      .append('svg:g')
      .attr('class', 'dimension')
      .attr('transform', function (p) {
        return 'translate(' + position(p) + ')';
      })
      .style('opacity', 0)
      .append('svg:g')
      .attr('class', 'axis')
      .attr('transform', 'translate(0,0)')
      .each(function (d) {
        d3.select(this).call(axis.scale(yscale[d]));
      })
      .selectAll('path, line')
      .style('stroke', 'white')  // Set axis color to white
      .append('svg:text')
      .attr({
        'text-anchor': 'middle',
        y: 0,
        transform: 'translate(0,-5) rotate(' + __.dimensionTitleRotation + ')',
        x: 0,
        class: 'label',
      })
      .text(dimensionLabels)
      .on('dblclick', flipAxisAndUpdatePCP)
      .on('wheel', rotateLabels);
};

This modification ensures that the axis lines and paths are styled with a white stroke, making them visible against a dark background ^[2].

To continue talking to Dosu, mention @dosu.

[ltf-space]

Hello, if it is a canvas type chart, how can I change the color of the chart axis?

[dosubot[bot]]

To change the color of the chart axis in a canvas type chart, you can modify the axisLine property within the series configuration. Specifically, you need to set the color attribute within the lineStyle of axisLine.

Here is an example of how you can do this:

const axisLine = {
  roundCap,
  lineStyle: {
    width: axisLineWidth,
    color: 'white', // Set your desired color here
  },
};

This will change the color of the chart axis to white ^[1].

To continue talking to Dosu, mention @dosu.

[rusackas]

Moving this to a Q&A discussion, since it's not a bug. Part of the answer is that it depends on which viz library underlies the chart in question. I think here you're talking about ECharts. I wrote a blog post that goes a little into this, but in essence, CSS can't support it, so you need to adjust the configuration of ECharts. Either by layering in an ECharts theme, and/or by adjusting the ECharts config. You could do this any way you want on a fork, but if you have interest in contributing to the project and building an ECharts Theme that's inheriting/applying the Superset Theme object, we can talk about various approaches to that. We'd love the help here.