Axis Styling

Try It

Both charts below share the same two axis configs. Each column is one PcacAxisConfig.

A few things to notice: the bar chart's x axis is a category axis, so ticks does nothing there (one tick per bar); the labels move with tickSize and the plot area gives up exactly that much room; the x axis's grid runs through the middle of each bar on the bar chart and through each tick on the line chart; and hiding an axis hands its margins to the plot rather than leaving a gap. The color pickers start on each part's default; pick a color and the chart takes it, or click theme to go back. See Colors below for what each one does.

Markup

const config = {
  data: [ ... ],

  // One PcacAxisConfig per axis. Every field is optional; leave the whole
  // object out for a default axis (labels only, 5 ticks, grid on, 0-100).
  xAxis: {
    label: 'Product', // axis title, centered below the tick labels
    tickSize: 12,     // tick mark length in px - setting it is what turns the marks on
    showLine: true,   // solid line along the axis
    lineColor: '#0d6efd' // its color (see Colors below)
  },
  yAxis: {
    domainMax: 1000,  // the value axis runs 0..domainMax (format: a PcacFormatEnum, e.g. Percentage)
    label: 'Units sold',
    subLabels: { min: 'Low', mid: 'Medium', max: 'High' }, // by position along the axis
    ticks: 4,         // requested tick (and grid line) count
    showGrid: false   // no horizontal grid lines
  }
} as PcacBarVerticalChartConfig;

// Grids on both axes: the x axis's is off by default on this chart, so ask for it.
const gridded = {
  data: [ ... ],
  xAxis: { showGrid: true }
} as PcacLineChartConfig;

// Or hide an axis entirely: the space it took goes back to the plot.
const sparkline = {
  data: [ ... ],
  xAxis: { hide: true },
  yAxis: { hide: true, showGrid: false }
} as PcacLineChartConfig;

Colors

Each part of an axis has a color field. Give it any CSS color and only that part, on that axis, changes. Leave it out and the part keeps its default.

Three things to know:

1. A color never turns a part on.tickColor only shows once tickSize has drawn the marks, lineColor once showLine is true, gridColor while that axis's grid is drawn.
2. Each axis is separate.xAxis and yAxis can use different colors.
3. Any CSS color works. Hex, rgb(), a named color, even currentColor.

In the config

const config = {
  data: [ ... ],
  xAxis: {
    showLine: true,
    lineColor: '#0d6efd',   // blue axis line
    tickSize: 6,
    tickColor: '#0d6efd',   // blue tick marks
    tickLabelColor: '#495057'
  },
  yAxis: {
    label: 'Units sold',
    labelColor: '#0d6efd',
    gridColor: '#cfe2ff'    // pale blue grid; the y axis's grid is on by default
  }
} as PcacBarVerticalChartConfig;

Or in a stylesheet

Every color is also a CSS custom property, so you can set the same thing in CSS instead — on the chart, on a wrapper, or on body — and every chart inside picks it up. Handy for a dark panel. If a chart's config also sets the color, the config wins.

/* Every chart inside .dark-panel */
.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;
}

Notes

• Everything is optional. Omit a field to get its default, or omit xAxis / yAxis altogether for a default axis. A config built with new gets both axes pre-filled.
• Tick marks are off until sized. Setting tickSize is what turns them on for that axis; an axis without one draws no marks and its labels stay where they have always been. 0 keeps them off but pulls the labels in to the axis.
• The chart makes room. The left margin grows with the y axis's tickSize and the bottom margin with the x axis's (by the difference from 6px), so the plot area shrinks to keep the labels inside the chart. A shorter tick hands that room back.
• Hiding an axis reclaims its margins. The y axis owns the left and top margins, the x axis the bottom and right; hide one and the plot grows into them, so the chart's overall size doesn't change.
• Grids belong to an axis. Horizontal grid lines run from the y axis's ticks, vertical ones from the x axis's (or through each category, on a category axis), and ticks on that axis sets how many there are. With showGrid unset a chart draws the one grid it always has — the y axis's on vertical bar and line/area/plot charts, the x axis's on the horizontal bar chart; set it on either axis to turn that grid on or off. On line, area and plot charts a zoomable axis's grid follows zoom and pan.
• A label titles the axis. It sits centered along the axis at the chart's edge (rotated for the y axis), and the margin grows by 18px to fit it, so the plot shrinks by that much. Clear it to get the room back.
• Sub labels go by position, not value.min sits at the axis's start, mid at its center and max at its end, in their own row between the tick labels and the label, anchored so they stay within the axis. Give any one, two or all three. The margin grows by 16px while any is set.
• Axis lines are separate from tick marks.showLine draws the line along the axis with or without tick marks, and vice versa. The line carries D3's short end-caps at either end.
• Zoom keeps it all. On line, area and plot charts a zoomable axis (enableZoomX for x, enableZoomY for y) is redrawn as you zoom and pan, with the same settings.
• Colors are per part, per axis. See Colors above. The defaults are the theme's $gray-* variables ($gray-900 marks and line, $gray-700 label, $gray-600 sub labels, $gray-200 grid), which the Sass override on the Theme page can also change for every chart at once.
• The pie chart has no axes, so it takes neither.