Theme

Customizing the appearance of Pioneer Charts is managed via overriding Sass variables and combining those overrides in a set of service calls. The colors of a chart's guides — axes, grid, fan-out anchors — can also be set on the chart's own config, or as CSS custom properties.

Default Theme

A compiled version of the default theme is located at the following:

./node_modules/@pioneer-code/pioneer-charts/
  |-  themes
  |   |-  pioneer-charts.css
  |   |-  pioneer-charts.min.css

Sass

If you prefer adding the default theme to your project through a Sass build, you need to make reference to the root Pioneer Chart Sass file in your project like so.

@use "@pioneer-code/pioneer-charts/scss/pioneer-charts";

Customize

Styling for Pioneer Charts takes place at three different levels: the theme's Sass variables, per-chart color fields on a config (with a CSS custom property behind each), and the color service for the data itself. The need to align styling across css and javascript comes from the dynamic nature styles are applied through D3.

Styles

Much like before, you are going to want to import the Pioneer Chart Sass code into your code. The difference being, you will now want to override Pioneer Chart variables at the same time.

@use "@pioneer-code/pioneer-charts/scss/pioneer-charts" with (
  $gray-800: #1a1a2e, // tooltip background
  $white: #f4f4f8,    // tooltip text
);

For a full reference of variables, you can look at the default theme import file locate at the following:

./node_modules/@pioneer-code/pioneer-charts/scss/core/theme/imports.scss

Chart Colors

The colors of a chart's guides have a field each on its config, taking any CSS color and applying to that chart alone: on each axis (PcacAxisConfig) labelColor, subLabelColor, tickLabelColor, tickColor, lineColor and gridColor; on the plot chart's pointFanOut, spokeColor and anchorColor; on a line, area or plot chart's pointRange, color (unset, each range takes its series' color); and on the donut chart, labelColor and subLabelColor for the text in its center. Unset, each keeps the theme's color. See Axis Styling to try them.

Each is applied as a CSS custom property on the part it colors, and the theme reads every one with its own color as the fallback — so you can also set them in a stylesheet, on any ancestor, to restyle every chart under it without touching a config (a config color still wins where given):

.dark-panel {
  --pcac-axis-label-color: #dee2e6;
  --pcac-axis-sub-label-color: #adb5bd;
  --pcac-axis-tick-label-color: #dee2e6;
  --pcac-axis-tick-color: #adb5bd;
  --pcac-axis-line-color: #adb5bd;
  --pcac-grid-color: #495057;
  --pcac-fan-out-spoke-color: #6c757d;
  --pcac-fan-out-anchor-color: #adb5bd;
  --pcac-point-range-color: #adb5bd;
  --pcac-donut-center-label-color: #f8f9fa;
  --pcac-donut-center-sub-label-color: #adb5bd;
}

Color Service

In some cases, the charts that utilize d3 apply styles dynamically. For example, in a bar chart, a d3 iteration over a collection of data that produces individual bars in the chart might require each bar to be a different color. Meaning, in that piece of code that colors are being applied from the color service.

...
this.colors = this.colorService.getColorScale(config.data.length);
...

...
.style('fill', (d: PcacData, i: number) => {
  return this.colors[i];
})
...

In order to override these values in your code, you will first need to import the PcacColorService into your App Component.

import { Component, inject } from '@angular/core';
import { PcacColorService } from '@pioneer-code/pioneer-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  colorService = inject(PcacColorService);

  constructor() {
    this.colorService.setScale([...]);
  }
}

Now that you have access to the colorService, you can start interacting with its API directly in ngOnInit.