Unable to change color of axis legends in ResponsiveBar

I have a responsive bar chart that I’m unable to change the color of the axisLeft and axisBottom Legend text, it seems to always be black.

• I have tried the theme property from issue#132 and was able to change some colors to better fit my theme, but not the axis legend text colors.
• I also tried the solution of issue#257 to add textColor into the legends array, and was able to change the text to white in the legend using itemTextColor but did not affect the axis label text.
• I also tried the theme settings in the sandbox example on issue#311 which is great for setting the actual grid, but did not change the axis labels from black.
• I attempted to look through the code to see if I could find where that axis label is generated and inherits the color from, but there is a lot of code to go through and was unable to track it down.
• Lastly, I tried just brute forcing some properties as a last resort to see if I could get lucky with finding the correct setting, which is why I’m now posting here.

Code:

import React from 'react';
import { ResponsiveBar } from '@nivo/bar';

const data = [
    {
      "map": "RoL",
      "wins": 120,
      "loss": 193,
    },
    {
      "map": "DS",
      "wins": 35,
      "loss": 160,
    },
    {
      "map": "TA",
      "wins": 33,
      "loss": 120,
    },
    {
      "map": "TTP",
      "wins": 27,
      "loss": 3,
    },
    {
      "map": "BRH",
      "wins": 199,
      "loss": 19,
    },
    {
      "map": "NA",
      "wins": 117,
      "loss": 107,
    },
    {
      "map": "AF",
      "wins": 195,
      "loss": 156,
    },
    {
      "map": "BEA",
      "wins": 195,
      "loss": 156,
    },
    {
      "map": "HP",
      "wins": 195,
      "loss": 156,
    },
    {
      "map": "M",
      "wins": 195,
      "loss": 156,
    }
  ]

const Bar = () => (
        <ResponsiveBar
            data={data}
            keys={[
                "wins",
                "loss",
            ]}
            indexBy="map"
            margin={{
                "top": 50,
                "right": 130,
                "bottom": 50,
                "left": 60
            }}
            padding={0.3}
            colors="dark2"
            colorBy="id"
            borderColor="inherit:darker(1.6)"
            axisTop={null}
            axisRight={null}
            axisBottom={{
                "tickSize": 5,
                "tickPadding": 5,
                "tickRotation": 0,
                "legend": "Map",
                "legendPosition": "middle",
                "legendOffset": 32,
            }}
            axisLeft={{
                "tickSize": 5,
                "tickPadding": 5,
                "tickRotation": 0,
                "legend": "Wins / Loss",
                "legendPosition": "middle",
                "legendOffset": -40,
            }}
            labelSkipWidth={12}
            labelSkipHeight={12}
            labelTextColor="#ffffff"
            animate={true}
            motionStiffness={90}
            motionDamping={15}
            theme={{
                axis: {
                  fontSize: '14px',
                  tickColor: '#eee',
                  ticks: {
                    line: {
                      stroke: "gray"
                    },
                    text: {
                      fill: "#ffffff",
                    },
                  },
                },
              }}
            legends={[
                {
                    "dataFrom": "keys",
                    "anchor": "bottom-right",
                    "direction": "column",
                    "justify": false,
                    "translateX": 120,
                    "translateY": 0,
                    "itemsSpacing": 2,
                    "itemWidth": 100,
                    "itemHeight": 20,
                    "itemDirection": "left-to-right",
                    "itemOpacity": 0.85,
                    "itemTextColor": '#ffffff',
                    "symbolSize": 20,
                    "effects": [
                        {
                            "on": "hover",
                            "style": {
                                "itemOpacity": 1
                            }
                        }
                    ]
                }
            ]}
        />
)

export default Bar

[plouc]

@PaulLNH, you can use axis.legend.text.fill, I’ve created an example => https://codesandbox.io/s/000mv35lxn

[pratikguru]

Hey is this still available for the latest version? This does not seem to work for this. ( v0.59.0 ).

      <ResponsiveBar
            data={this.props.data}
            keys={[ 'units']}
            indexBy="Year"
            margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
            padding={0.3}
            colors={{ scheme: 'nivo' }}
            theme={{
              axis: {
                  fontSize: "14px",
                  tickColor: "#eee",
                  ticks: {
                    line: {
                      stroke: "#555555"
                    },
                    text: {
                      fill:"#FFFFFF"
                    }
                  },
                  legend: {
                    text: {
                      fill: "#aaaaaa"
                    }
                  }
                },
            }}
            labelTextColor="inherit:darker(2.4)"
            borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
            axisTop={null}
            axisRight={null}
            axisBottom={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: 'Timestamp',
                legendPosition: 'middle',
                legendOffset: 32,
                itemTextColor:"white"
            }}
            axisLeft={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: 'Unit Count',
                legendPosition: 'middle',
                legendOffset: -40
            }}
            labelSkipWidth={12}
            labelSkipHeight={12}
            labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
            legends={[
                {

                    dataFrom: 'keys',
                    anchor: 'bottom-right',
                    direction: 'column',
                    justify: false,
                    translateX: 120,
                    translateY: 0,
                    itemsSpacing: 2,
                    itemWidth: 100,
                    itemHeight: 20,
                    itemDirection: 'left-to-right',
                    itemTextColor:"#ffffff",
                    itemOpacity: 0.85,
                    symbolSize: 20,
                    effects: [
                        {
                            on: 'hover',
                            style: {
                                itemOpacity: 1
                            }
                        }
                    ]
                }
            ]}
            animate={true}
            motionStiffness={215}
            motionDamping={15}
        />

Thanks!