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
Bubble charts
Pie charts
Sunburst 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",
      },
      popoverMenus: {
        // Chart data shown on hover
        background: "white",
        borderRadius: "3px",
        boxShadow: "0 1px 2px rgba(33,33,33,0.2)",
        color: "#212529",
        padding: ".3rem .5rem",
      },
      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}
/>
) }