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.

Base
stringoptional
   #ffffff

main background color.

objectoptional

Default text style.

numberoptional

Main font size, used as a default value when unspecified in nested properties.

stringoptional
   #333333

Main text color, used as a default value when unspecified in nested properties.

numberoptional

Main text outline width, used as a default value when unspecified in nested properties.

stringoptional
   transparent

Main text outline color, used as a default value when unspecified in nested properties.

Axes & Grid
objectoptional
objectoptional
objectoptional
objectoptional
objectoptional
objectoptional
Legends
objectoptional
objectoptional
objectoptional
objectoptional
Annotations
objectoptional
objectoptional
objectoptional
objectoptional
objectoptional
Tooltip
objectoptional
objectoptional