Chart theme

Yagr supports two color themes by default: light and dark. You can setup theme in config.chart.appearance.theme.

  • light
    Light theme

  • dark
    Dark theme

Customization

Yagr theme implemented via CSS, you can override them to classname yarg_theme_light and keep theme light or (yagr_theme_dark and keep theme dark).

  • --yagr-font-family - font familty for chart and legend
  • --yagr-tooltip-font-family - font family of tooltip
  • --yagr-title-color - color of chart title
  • --yagr-legend-item - legend item text color
  • --yagr-legend-item-hover - legend item text color on hover
  • --yagr-legend-item-hidden - legend hidden item text color
  • --yagr-background - background of chart
  • --yagr-grid - grid color
  • --yagr-axis-stroke - axis stroke color
Previous
CSS
Next
React