Looks

Quick start

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.

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 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.

editor.commands.applyChartLook({ look, pos: target.pos })