Nivo: How to change color and size of label of the axis

[ellipticaldoor]

I want to use a dark background and increase the font for mobile.

How I can do that?

[plouc]

@ellipticaldoor, you can use the theme property, I've created an example of it.

[ellipticaldoor]

Awesome! thank you very much.

[cameronaziz]

@plouc Thanks, I cant seem to find the documentation on the theme prop

[plouc]

@cameronaziz, you're right, it's missing, the TypeScript definition might help to figure out what's available.

[caribouflex]

Hi guy's, it seems this theme property doesn't work [anymore]. And it doesn't appear to be documented.
Is it still available to do that ? I tried on the codesandbox that @plouc forwarded, by updated the dependencies.
Thanks for the help.

[EDIT]

Sorry I commented too fast, got my answer in the #311

[christopherfrance]

As of at least 0.58.0 it looks like there is a default theme in node_modules/@nivo/core/dist/nivo-core.cjs.js — I pulled it out and am starting to use it as the basis for my theming. Here's a snapshot of how it looks today (it's probably under active development and likely to change.)

Not sure yet how this interacts with each of the components, but figured I'd share it since some of the googleable docs are out of date.

export default {
  background: 'transparent',
  fontFamily: 'sans-serif',
  fontSize: 11,
  textColor: '#333333',
  axis: {
    domain: {
      line: {
        stroke: 'transparent',
        strokeWidth: 1
      }
    },
    ticks: {
      line: {
        stroke: '#777777',
        strokeWidth: 1
      },
      text: {}
    },
    legend: {
      text: {
        fontSize: 12
      }
    }
  },
  grid: {
    line: {
      stroke: '#dddddd',
      strokeWidth: 1
    }
  },
  legends: {
    text: {
      fill: '#333333'
    }
  },
  labels: {
    text: {}
  },
  markers: {
    lineColor: '#000000',
    lineStrokeWidth: 1,
    text: {}
  },
  dots: {
    text: {}
  },
  tooltip: {
    container: {
      background: 'white',
      color: 'inherit',
      fontSize: 'inherit',
      borderRadius: '2px',
      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',
      padding: '5px 9px'
    },
    basic: {
      whiteSpace: 'pre',
      display: 'flex',
      alignItems: 'center'
    },
    table: {},
    tableCell: {
      padding: '3px 5px'
    }
  },
  crosshair: {
    line: {
      stroke: '#000000',
      strokeWidth: 1,
      strokeOpacity: 0.75,
      strokeDasharray: '6 6'
    }
  },
  annotations: {
    text: {
      fontSize: 13,
      outlineWidth: 2,
      outlineColor: '#ffffff'
    },
    link: {
      stroke: '#000000',
      strokeWidth: 1,
      outlineWidth: 2,
      outlineColor: '#ffffff'
    },
    outline: {
      fill: 'none',
      stroke: '#000000',
      strokeWidth: 2,
      outlineWidth: 2,
      outlineColor: '#ffffff'
    },
    symbol: {
      fill: '#000000',
      outlineWidth: 2,
      outlineColor: '#ffffff'
    }
  }
}

[Caree12]

Hi Guys,

On bar verison "@nivo/bar": "^0.59.2" and line version "@nivo/line": "^0.59.3" I was having no luck updating the font size of the axis. The below worked for me! Hope this helps someone else!

const lineGraphSettings = {
theme: {
fontSize: '14px',
textColor: 'blue',
},
};

animate={lineGraphSettings.animate == false ? lineGraphSettings.animate : true}
axisTop={null}
theme={lineGraphSettings.theme}
/>