---
title: "Looks"
description: "A look is how a chart looks apart from what it shows."
canonical_url: "https://tiptap.dev/docs/diagrams/charts/looks"
---

# Looks

A look is how a chart looks apart from what it shows.

## Quick start

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

const look = chartLook(source.spec, source.data)
editor.commands.applyChartLook({ look, pos: target.pos })
editor.commands.insertChart({ type: 'line', data, look })

const template = chartLook(source.spec, source.data, { type: true })
editor.commands.insertChart({ data, look: template })
```

## 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 reference lines, unless `references: false`

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

- **A field the look does not set** is kept by the chart.
- **With `type: true`** the look also holds the chart type, which makes it a template. Every chart
  it is applied to, and every new one it starts, becomes that type.
- **`insertChart` with a `type`** keeps that type over the look's.

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

## Saving looks

- **A look is plain JSON**, so an application can save it, per user or per team, and pass it back
  later.
- **`readChartLook(value)`** checks a saved look the way a Chart Spec is checked and drops what is
  not one. `applyChartLook` and `insertChart` call it themselves.
- **A look copies fields into the chart**, so a document stays complete without the saved list.

## Looks and styles

A [style](https://tiptap.dev/docs/diagrams/guides/styling.md#styles) is different from a look:

- **A chart names a style by id** (`spec.style`) instead of copying its fields.
- **Changing a registered style** changes every chart that names it.

## Commands

### applyChartLook

Gives a chart the look of another one.

```ts
editor.commands.applyChartLook({ look, pos: target.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 |