Available types: bar, line, pie, scatter, radar

For bar/line charts:

• A list of values: [10, 20, 30]
• A list of maps with names: [%{name: “Series 1”, values: [10, 20, 30]}]
• A list of series with different types: [%{name: “Bar”, type: “bar”, values: [10, 20, 30]}, %{name: “Line”, type: “line”, values: [5, 15, 25]}]
• A list of time series: [%{name: “Series 1”, data: [[“2024-01-01”, 10], [“2024-01-02”, 20]]}]

For pie charts:

• A list of maps with name and value: [%{name: “A”, value: 10}, %{name: “B”, value: 20}]

For scatter charts:

• A list of [x, y] points: [[10, 20], [30, 40]]
• A list of maps with series: [%{name: “Series 1”, data: [[10, 20], [30, 40]]}]

Example: [“Jan”, “Feb”, “Mar”]

The given items can either be a hex string, such as “#4C9AFF”, or a CSS variable, prefixed with var:, but omitting the -- prefix, such as chart-primary. The CSS variable is expected to be on the :root element, so the variable would be defined as such:

:root {
  --chart-primary: #4C9AFF;
}

In addition, the color setting supports the light-dark() function, which can be used to automatically resolve the appropriate color based on the the color scheme. That way, the variable can be defined as such:

:root {
  --chart-primary: light-dark(#4C9AFF, #36B37E);
}

Example: [“#4C9AFF”, “#36B37E”, “#FF5630”, “#FFAB00”, “#6554C0”]

These will be deeply merged with options generated from other attributes.