Nivo: Unable to change color of axis legends in ResponsiveBar

[PaulLNH]

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

[plouc]

Maybe you could use a diverging bar chart for that kind of metrics, like https://nivo.rocks/storybook/?selectedKind=Bar&selectedStory=diverging%20stacked&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

[PaulLNH]

Thank you, extremely helpful! And you're right the diverging bar would be a better fit for this type of data so I will give that a go.

[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!

[antoniobologna]

Yeah I think the theme part is broken in the latest release. What works for me is to have a theme map and use it like this:

<ResponsiveBar
  theme={theme.chart}
  colors={theme.colors[bar.id]}
  legends={[
    {
      itemTextColor: theme.chart.axis.legend.text.fill,
    },
  ]}
...

[agustingabiola]

Someone knows if they plan to fix the theme property? It's quite important if you want to use the charts in dark theme app for example. I'm not able to change the legend color of the left axis in latest version (@nivo/line 0.62.0)

[wyze]

It does appear to be working, see here: https://codesandbox.io/s/focused-morse-s47o2?file=/src/App.tsx:1448-1522

Note it looks like Antonio is referencing the legend, where the initial issue is referencing axis so we might be conflating 2 different things. There was #814 for the legend, which has been fixed and not released yet. But you can change the axis legend colors using the theme in the latest version.

[agustingabiola]

@wyze Thanks a lot, I guess I was trying everything but this jaja. Sorry for losing your time then, have a nice day :)

[VolodymyrKornetskyi]

@wyze is it possible to make different axis with different colors? Because looks like now there is a possibility to add styles only for all axes together.

[wyze]

@VolodymyrKornetskyi That is not currently supported.