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.