> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lightdash.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom project charts

> Reusable chart types you build once for your project, then use like any built-in chart type

Project chart types are reusable chart types you build for your project. You describe the chart you want, Lightdash builds it, and anyone in the project can then use it like a built-in chart type. Pick **Custom** in the chart type menu, then choose the chart type in the **Custom chart type** picker.

For a one-off chart written directly as a Vega-Lite spec, see [Custom Vega charts](/explore/chart-types/custom-vega-charts).

A project chart type is a chart type you build once and reuse. Describe the chart you want - a calendar heatmap, a hexbin map, a custom KPI layout - and Lightdash builds it, along with the inputs it needs (for example a "Category" dimension and a "Value" metric). Anyone in the project can then pick it as a chart type, map their own fields to its inputs, and save the result like any other chart.

The same chart type can power many saved charts, each with its own query and field mapping.

<Info>
  Project chart types are an enterprise feature, enabled by default on Lightdash Cloud. Self-hosted instances need the [data apps runtime configured](/self-host/data-apps).
</Info>

## Browsing chart types

Every chart type in the project lives in the gallery. Go to **Browse** and pick **Chart types**.

Each card previews the chart type with sample data. Click a card to see its description, who built it, its inputs, and its current version, and to preview it in the Explorer, edit it, or delete it.

<Frame>
  <img alt="The chart type gallery, showing cards for each of the project's chart types" className="block dark:hidden" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-gallery-light.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=86775e467709dcc5d9d387a6ac72b415" width="1512" height="470" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-gallery-light.png" />

  <img alt="The chart type gallery, showing cards for each of the project's chart types" className="hidden dark:block" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-gallery-dark.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=48f8ec7b27970b5219e06b4f680504a7" width="1512" height="470" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-gallery-dark.png" />
</Frame>

## Building a chart type

Click **New chart type** in the gallery to open the builder, then describe the chart you want.

The builder previews the chart type with sample data as it's built. The **Configure** panel beside the preview holds the display options the chart type declares, along with a color palette to preview it against. Follow-up prompts create new versions, and **History** opens a panel where you can view an earlier version or restore it.

Name and describe the chart type in the header - that's what people see in the gallery and in the chart type picker. When it looks right, click **Preview in explorer** to try it against a real query.

<Frame>
  <img alt="The chart type builder, with the sample-data preview, the Configure panel, and the prompt bar" className="block dark:hidden" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-builder-light.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=e2388e294ecdabedad6f48c56416ee76" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-builder-light.png" />

  <img alt="The chart type builder, with the sample-data preview, the Configure panel, and the prompt bar" className="hidden dark:block" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-builder-dark.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=e0f16517138b84f1980da307b48fde7f" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-builder-dark.png" />
</Frame>

You can also start one from any chart, without leaving the Explorer: pick **Custom** as the chart type and choose **Create new chart type** in the picker.

<Tip>
  Chart types can also be developed on your machine and uploaded with the CLI. See [Data apps as code](/data-apps/download-data-apps-as-code).
</Tip>

## Using a chart type in a chart

<Steps>
  <Step title="Run your query">
    Select the dimensions and metrics your chart needs and run the query. You have to run it before you can pick a custom chart type.
  </Step>

  <Step title="Pick the chart type">
    Open **Configure**, choose **Custom** in the chart type menu, then pick one from the **Project** group in the **Custom chart type** picker. Only chart types that finished building are listed.
  </Step>

  <Step title="Map your fields">
    Each of the chart type's inputs gets a field picker, the same as configuring axes on a bar or line chart. Required inputs can't be cleared.
  </Step>
</Steps>

<Frame>
  <img alt="The Custom chart type picker open in the Explorer, listing the built-in Vega editor and the project's own chart types" className="block dark:hidden" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-picker-light.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=791a81b489da5345347e901526da1b16" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-picker-light.png" />

  <img alt="The Custom chart type picker open in the Explorer, listing the built-in Vega editor and the project's own chart types" className="hidden dark:block" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-picker-dark.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=0fc16cbc86c2be2c5608c6e26e2831de" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-picker-dark.png" />
</Frame>

The chart re-renders as you change the mapping or the underlying query.

<Frame>
  <img alt="A project chart type selected in the Explorer, with its inputs mapped to the query's fields and the chart rendering" className="block dark:hidden" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-mapping-light.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=e00967fe684980aadcba0bcf956ec205" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-mapping-light.png" />

  <img alt="A project chart type selected in the Explorer, with its inputs mapped to the query's fields and the chart rendering" className="hidden dark:block" src="https://mintcdn.com/lightdash/U8EXy8LiPYA5IqN1/images/explore/chart-types/custom-project-charts/custom-chart-types-mapping-dark.png?fit=max&auto=format&n=U8EXy8LiPYA5IqN1&q=85&s=eac0f886e53d651a6f1fec0eb6be1e32" width="1512" height="900" data-path="images/explore/chart-types/custom-project-charts/custom-chart-types-mapping-dark.png" />
</Frame>

## Saving and dashboards

Save the chart like any other chart. The saved chart remembers which chart type it uses and how its inputs are mapped.

Saved charts render in chart view and as dashboard tiles, driven by each surface's own query - dashboard filters and [date zoom](/explore/dashboards/date-zoom) apply like any other chart tile.

## Permissions

Chart types are available across the whole project. They don't live in spaces and can't be moved into one.

* Anyone who can view a chart can see the chart type it renders with.
* Editors and above can build new chart types.
* You can edit and delete the chart types you built. Project admins can edit and delete any of them.
