How to change color and size of label of the axis

[dortamiguel]

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.

[dortamiguel]

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

[cbfrance]

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', }, };

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

[jessikadg]

To change fontSize all over the chart, the following code worked for me:

<ResponsiveLine 
    theme={{
    fontSize: 16,
   }}
/>

[Gungrave223]

So setting via theme={{}} set's the font size globally for the chart....is it possible to set the font size for just the y axis?

[wyze]

@Gungrave223 it is not currently possible to adjust the theme per axis, only for all axes.

[Gungrave223]

@wyze Thanks for the response....

For anyone looking to do something similar... The solution is to use the axis format function to wrap the value in a <tspan> and add the styling directly to the <tspan>.

[ShaviniM]

how to add bold letters in nivo charts?

[nastystanevich]

properties axisBottom, axisLeft have ability to recieve formatting function for axis values. Here there's example of adding $ to the beginning.

axisLeft={{
    format: (value) => `$${value}`
}}

As well you can return value wrapped into <tspan> and pass to this tag all necessary styles.

[alissaVrk]

@Gungrave223 Unfortunately it doesn't seem to work anymore format: (value) => <tspan>{yAxisValue(value as number)}</tspan>, gives [object Object]

[nastystanevich]

@alissaVrk it still works for me, check your yAxisValue may be it returns [object Object].

In my code it looks this way:

import { ResponsiveLine } from "@nivo/line";
<ResponsiveLine 
...
axisLeft={{
  format: (value: number) => <tspan style={{ fill: green[600], fontWeight: 600 }}>{value}</tspan>
}}
/>

[zsteiner]

I am running into a similar issue using tspan in the format function. My format functions work when returning a string, but cannot return JSX/SVG. They render [object Object] string.

@nastystanevich Are you using the most current version (v0.83.0)? It's possible that this method was broken by a more recent update?

[alissaVrk]

format: (value) => <tspan>aaaaa</tspan> also doesn't work

[nastystanevich]

@zsteiner you're right, the issue's appeared in some latest patches, I had v0.80.0 and as soon as I installed v0.83.0 I observed the same issue with returning value.

[SandyGifford]

Confirmed that downgrading to 0.80.0 fixes the [object Object] problem. Looks like this change was made about 2 months ago and was released going from 81 to 82.

[Kartstig]

I am running into a similar issue using tspan in the format function. My format functions work when returning a string, but cannot return JSX/SVG. They render [object Object] string.

@nastystanevich Are you using the most current version (v0.83.0)? It's possible that this method was broken by a more recent update?

I am also seeing this on 0.83.0

[evnp]

Another report, seeing this behavior on 0.83.0, [object Object] when we try to return JSX from the axisLeft format function. Downgrading to 0.80.0 has fixed the issue for now.

[JoeShep]

Encountered the [object Object] problem as well. Really need to use a format method in a component library so each consuming app can define how to format its X-axis labels. Downgrading would be, well, a downgrade. Hoping for a more robust fix

[plouc]

format is strictly for formatting now, if you wish to change the rendering, please use renderTick.

[nastystanevich]

@plouc, thanks for remind us about renderTick, it solved the problem with formatting in latest version. Here is an example of solution:

<ResponsiveBar
  ...
  axisBottom={{
         ...
          renderTick: ({ x, y,  textAnchor, textX, textY, value }) => (
            <g transform={`translate(${x},${y})`}>
              <text
                textAnchor={textAnchor}
                transform={`translate(${textX},${textY + 5})`} // places label 5px lower than origin place
                style={{ fontSize: 8px }}
              >
                {value}
              </text>
            </g>
          )
        }}
  ...
/>

[fabiojonathanarifin]

this solution works for me.

theme={{ text: { fill: "#ffffff" }, }}

[ThurberISEC]

As of 17 January, 2024: In case anyone still wonders, here's how to change the legend text on the axes: theme={{axis: {legend: {text: {fontSize: 20, fontWeight: 700, fill: "#0000ff"}}}}} Substitute your size, weight, color, etc. It changes for both axes. I don't know how to change one axis at a time.