# Style a custom chart

> Style a custom chart with Vega-Lite's config property, drop in a ready-made theme, and match the look of Holistics's built-in charts.

This guide shows how to style a custom chart with Vega-Lite's [`config`](https://vega.github.io/vega-lite/docs/config.html): 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.

```aml
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](https://vega.github.io/vega-lite/docs/config.html) 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](https://vega.github.io/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](https://github.com/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](https://github.com/holistics/custom-chart-library/blob/main/bar_chart/barchart.vgl.aml).

```aml
"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:

```aml
"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`](/reference/aml/custom-chart#holisticsformat) for more.

## Next steps

- [Make a custom chart interactive](/guides/create-interactive-custom-charts) so users can click and drag to filter.
- See every styling property in the [AML Custom Chart reference](/reference/aml/custom-chart).