Style a custom chart

This guide shows how to style a custom chart with Vega-Lite's config: how config works and how to match the look of Holistics built-in charts.

The config property

config sits at the root of your template, alongside data, mark, and encoding. Anything you set here becomes the default for the whole chart. A value set on a specific mark or encoding channel still overrides the config default.

template: @vgl {
  "data": { "values": @{values} },
  "mark": "bar",
  "encoding": { ... },

  // chart-wide styling defaults
  "config": {
    "view": { "stroke": null }   // removes the default border around the plot area
  }
};;

Common things to set here are the font, the axis and gridline styling, the legend, and the color range. See the Vega-Lite config reference for the full list.

Reuse a ready-made theme

If you want a polished look quickly, Vega-Lite ships several themes you can copy wholesale into config, then adjust to taste.

1. Open your chart's example in the Vega Online Editor.

   

2. Go to the CONFIG tab, pick a theme, and copy the config it generates.

   

3. Paste it into your template's root-level config, then tweak the colors and fonts to taste.

   

Match the look of built-in charts

The Holistics Custom Chart Library styles its charts with a consistent config: muted labels, subtle dashed gridlines, and a clean plot area. Drop this block into your template's root level to give a custom chart the same look. It is taken from the library's bar chart.

"config": {
  "font": "Inter",
  "view": {
    "stroke": "transparent"
  },
  "axis": {
    "title": null,
    "labelFontSize": 11,
    "labelFontWeight": 500,
    "labelColor": "#858B9E",
    "labelPadding": 10,
    "gridColor": "#F4F6F8",
    "gridDash": [8, 3]
  },
  "axisX": {
    "tickSize": 7.5,
    "tickColor": "#bec1cb",
    "domainColor": "#bec1cb",
    "domainWidth": 1
  },
  "axisY": {
    "ticks": false,
    "domain": false
  }
}

Built-in charts also format axis labels and tooltips using each field's own format settings (currency, decimals, date format). To match that, apply holisticsFormat to your encoding channels:

"encoding": {
  "x": {
    "field": @{fields.dimension.name},
    "axis": {
      "format": @{fields.dimension.format},
      "formatType": "holisticsFormat"
    }
  },
  "y": {
    "field": @{fields.measure.name},
    "type": "quantitative",
    "axis": {
      "format": @{fields.measure.format},
      "formatType": "holisticsFormat"
    }
  }
}

Together, the shared config and the field formats make a custom chart read like the built-in charts around it. See holisticsFormat for more.

Next steps

• Make a custom chart interactive so users can click and drag to filter.
• See every styling property in the AML Custom Chart reference.