React ChartsColours

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([PieSeriesModule, LegendModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Colour Formats",
    },
    data: [
      { format: "#4878d0", value: 30 },
      { format: "rgb(238, 133, 75)", value: 25 },
      { format: "hsl(145, 63%, 42%)", value: 25 },
      { format: "mediumpurple", value: 20 },
    ],
    series: [
      {
        type: "pie",
        angleKey: "value",
        legendItemKey: "format",
        // Each slice is filled with the colour named by its legend label.
        fills: [
          "#4878d0", // hex
          "rgb(238, 133, 75)", // rgb
          "hsl(145, 63%, 42%)", // hsl
          "mediumpurple", // named colour
        ],
        strokeWidth: 0,
      },
    ],
    legend: {
      position: "right",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
import "./styles.css";

const dawn = {
  "--demo-bg": "#fffdf7",
  "--demo-fg": "#3a2e2e",
  "--demo-online": "#e07a5f",
  "--demo-retail": "#3d405b",
};
const dusk = {
  "--demo-bg": "#161b22",
  "--demo-fg": "#e6edf3",
  "--demo-online": "#58a6ff",
  "--demo-retail": "#ff7b72",
};
function applyPalette(palette: Record<string, string>) {
  for (const [name, value] of Object.entries(palette)) {
    document.documentElement.style.setProperty(name, value);
  }
}
let dark = false;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    theme: {
      params: {
        backgroundColor: "var(--demo-bg)",
        foregroundColor: "var(--demo-fg)",
      },
    },
    title: {
      text: "Monthly Revenue",
    },
    data: [
      { month: "Jan", online: 120, retail: 90 },
      { month: "Feb", online: 150, retail: 100 },
      { month: "Mar", online: 180, retail: 130 },
      { month: "Apr", online: 140, retail: 120 },
      { month: "May", online: 210, retail: 160 },
      { month: "Jun", online: 190, retail: 150 },
    ],
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "online",
        yName: "Online",
        fill: "var(--demo-online)",
      },
      {
        type: "bar",
        xKey: "month",
        yKey: "retail",
        yName: "Retail",
        fill: "var(--demo-retail)",
      },
    ],
    axes: {
      x: { type: "category", position: "bottom" },
      y: { type: "number", position: "left" },
    },
  });

  const togglePalette = () => {
    dark = !dark;
    applyPalette(dark ? dusk : dawn);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={togglePalette}>Toggle palette</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

:root {
    --demo-bg: #fffdf7;
    --demo-fg: #3a2e2e;
    --demo-online: #e07a5f;
    --demo-retail: #3d405b;
}

import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

let accentColor = "#2f6df0";
let backgroundColor = "#ffffff";
let mix = 0.85;
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    theme: {
      params: {
        accentColor,
        backgroundColor,
        // Text and axes are derived from the accent and background colours.
        foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" },
        axisLineColor: { ref: "accentColor", mix: 0.5 },
      },
    },
    title: {
      text: "Monthly Revenue",
    },
    data: [
      { month: "Jan", revenue: 120 },
      { month: "Feb", revenue: 150 },
      { month: "Mar", revenue: 180 },
      { month: "Apr", revenue: 140 },
      { month: "May", revenue: 210 },
      { month: "Jun", revenue: 190 },
    ],
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "revenue",
        yName: "Revenue",
        // A reference resolves on a series fill as well as on theme parameters.
        fill: { ref: "accentColor" },
      },
    ],
    axes: {
      x: { type: "category", position: "bottom" },
      y: { type: "number", position: "left" },
    },
  });

  const updateTheme = () => {
    const nextOptions = clone(options);

    nextOptions.theme = {
      params: {
        accentColor,
        backgroundColor,
        foregroundColor: { ref: "accentColor", mix, onto: "backgroundColor" },
        axisLineColor: { ref: "accentColor", mix: 0.5 },
      },
    };

    setOptions(nextOptions);
  };

  const changeAccent = (event: Event) => {
    accentColor = (event.target as HTMLSelectElement).value;
    updateTheme();
  };

  const changeBackground = (event: Event) => {
    backgroundColor = (event.target as HTMLSelectElement).value;
    updateTheme();
  };

  const changeMix = (event: Event) => {
    mix = Number((event.target as HTMLInputElement).value);
    document.getElementById("mix-value")!.textContent = mix.toFixed(2);
    updateTheme();
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div className="gap-right">
            <label htmlFor="accent-select">accentColor:</label>
            <select
              id="accent-select"
              onChange={(event) => changeAccent(event)}
            >
              <option value="#2f6df0">Blue</option>
              <option value="#d1495b">Red</option>
              <option value="#21b372">Green</option>
              <option value="#8a4fff">Purple</option>
            </select>
          </div>
          <div className="gap-right">
            <label htmlFor="bg-select">backgroundColor:</label>
            <select
              id="bg-select"
              onChange={(event) => changeBackground(event)}
            >
              <option value="#ffffff">White</option>
              <option value="#10131a">Midnight</option>
              <option value="#fff1e5">Paper</option>
            </select>
          </div>
          <div>
            <label htmlFor="mix-range">
              mix: <span id="mix-value">0.85</span>
            </label>
            <input
              id="mix-range"
              type="range"
              min="0"
              max="1"
              step="0.05"
              defaultValue="0.85"
              onInput={(event) => changeMix(event)}
            />
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);