Angular ChartsColours

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([PieSeriesModule, LegendModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      title: {
        text: "Colour Formats",
      },
      data: [
        { format: "#4878d0", value: 30 },
        { format: "rgb(238, 133, 75)", value: 25 },
        { format: "hsl(145, 63%, 42%)", value: 25 },
        { format: "oklch(70% 0.15 200)", value: 20 },
        { 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
            "oklch(70% 0.15 200)", // oklch
            "mediumpurple", // named colour
          ],
          strokeWidth: 0,
        },
      ],
      legend: {
        position: "right",
      },
    };
  }
}

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";

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,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="togglePalette()">Toggle palette</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      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" },
      },
    };
  }

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

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

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <div class="gap-right">
            <label for="accent-select">accentColor:</label>
            <select id="accent-select" (change)="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 class="gap-right">
            <label for="bg-select">backgroundColor:</label>
            <select id="bg-select" (change)="changeBackground($event)">
                <option value="#ffffff">White</option>
                <option value="#10131a">Midnight</option>
                <option value="#fff1e5">Paper</option>
            </select>
        </div>
        <div>
            <label for="mix-range">mix: <span id="mix-value">0.85</span></label>
            <input id="mix-range" type="range" min="0" max="1" step="0.05" value="0.85" (input)="changeMix($event)">
        </div>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      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" },
      },
    };
  }

  updateTheme = () => {
    const options = clone(this.options);

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

    this.options = options;
  };

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

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

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

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);