Theming

nivo supports theming via the theme property, this property must contain an object which defines various styles to be applied to your charts. If you don't provide a theme, the default theme will be used. When you provide a theme, you don't have to provide all properties as it will get merged with the default theme.

There are a few things to notice while theming your components. Values for font-size, borders… are unitless as nivo supports several implementations (SVG, HTML, Canvas), however you can pass extra CSS attributes when using a specific implementation, for example, you might add a stroke-dasharray to the grid lines when using the SVG implementation of the Bar component, however it will have no effect on BarCanvas as it doesn't support it. The theme only drives the base style of the charts, for things such as symbol colors, patterns, legends, you'll have to use the dedicated properties.

Theme
optional
   #ffffff

main background color.

optional
   #333333

main text color.

optional
px

main font size.

optional
optional
optional
optional
px
optional
   #777777
optional
optional
optional
px
optional
   #777777
optional
optional
optional
   #dddddd
optional
px