charts

charts is an object within the theme property for overriding chart styles.

To override wrapper styles for all charts, use panels.

<Vizzly.Dashboard
  // ...
  theme={{
    charts: {
      colors: ["#feae4a", "#5fbaff", "#e15e9d"],
    },
  }}
/>

Charts

charts dynamically creates more colors from the array specified. For example, if colors: [“black”, ”white”] were used, Vizzly would create a range of gray shades to accommodate charts requiring more than two colors.

charts style overrides apply to the following Views:

Column charts
Horizontal bar charts
Area sharts
Line charts
Scatter charts
Pie charts
Single stats
Combo charts

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    charts: {
      // Default Values
      colors: ["#feae4a", "#5fbaff", "#e15e9d"],
      title: {
        color: "#4b5462",
        fontFamily: "Inter, sans-serif",
        fontSize: 16,
        fontWeight: 400,
        lineHeight: 1.125,
        margin: "0",
        textAlign: "left",
      },
      subject: {
        color: "#8f8f91",
        fontFamily: "Inter, sans-serif",
        fontSize: "0.75rem",
        fontWeight: 400,
        lineHeight: 1.125,
        margin: "0 0 0.3rem 0",
        textAlign: "left",
      },
      iconColor: "#2d2f31",
      labels: {
        color: "rgba(0, 0, 0, 0.6)",
        fontFamily: "inherit",
        fontSize: 9,
        fontWeight: 700,
      },
      axisTitles: {
        color: "#000",
        fontFamily: "inherit",
        fontSize: "0.75rem",
        fontWeight: 400,
      },
      grid: {
        stroke: "rgba(200, 200, 200, 0.2)",
      },
      axis: {
        stroke: "#eaeaea",
      },
      pie: {
        cornerRadius: 5,
        gap: true,
        hole: true,
      },
      barChart: {
        cornerRadius: 3,
      },
      singleStat: {
        delteStyle: "pill",
      },
      threshold: {
        stroke: "#F4F4F4",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}