---
title: "Looks"
description: "A look is a copy of a chart's style, colors, frame, legend, lines and label layout."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/looks"
---

# Looks

A look is a copy of a chart's style, colors, frame, legend, lines and label layout.

## Quick start

```ts
import { chartLook } from '@tiptap-pro/extension-diagrams'

const [first, second] = editor.storage.diagrams.listCharts()

// Give the second chart the look of the first one
const look = chartLook(first.spec, first.data)
editor.commands.applyChartLook({ look, pos: second.pos })

// Insert a new line chart with the same look
editor.commands.insertChart({ type: 'line', data: second.data, look })

// A template also holds the chart type
const template = chartLook(first.spec, first.data, { type: true })
editor.commands.insertChart({ data: second.data, look: template })
```

[`listCharts()`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/storage.md) returns every chart in the document.

## What a look holds

`chartLook(spec, data, { references?, type? })` takes the look of a chart:

- `style`, `palette`, `background`, `border` and `legend`
- the grid and axis lines
- the label layout of the category axis
- the line styles of the series, by position: the first series' style goes to the first series
- the reference lines

Titles, ranges, the step and the data stay with each chart.

| Option       | Type      | Description                                            |
| ------------ | --------- | ------------------------------------------------------ |
| `references` | `boolean` | `false` leaves out the reference lines. Default `true` |
| `type`       | `boolean` | `true` takes the chart type too. Default `false`       |

When you apply a look, the chart keeps every field the look does not set. A look with the type
is a template: every chart it is applied to, or starts, becomes that type. A `type` passed to
`insertChart` wins over the look's.

## Saving looks

A look is plain JSON. Your app can save it, per user or per team, and pass it back later.

`readChartLook(value)` checks a saved look the same way a Chart Spec is checked, and drops
anything that does not belong in a look. `applyChartLook` and `insertChart` call it themselves.

Applying a look copies its fields into the chart, so a document stays complete without your
saved looks.

## Looks and styles

A [style](https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/styling.md#styles) is different from a look. A chart names a style by id
(`spec.style`) instead of copying its fields. When you change a registered style, every chart
that names it changes.

## Commands

### applyChartLook

Gives a chart a look, taken from another chart or saved earlier.

```ts
editor.commands.applyChartLook({ look, pos: second.pos })
```

| Option | Type        | Description                                          |
| ------ | ----------- | ---------------------------------------------------- |
| `look` | `ChartLook` | The look, from `chartLook` or a saved one            |
| `pos`  | `number`    | The chart's position. Defaults to the selected chart |

Returns `false` when there is no chart at `pos`, or no chart is selected.