---
title: "Editing in the picture"
description: "In an editable editor, a double click on a text of a chart opens a field over it with that text, and the new text is written into the chart's data or settings."
canonical_url: "https://tiptap.dev/docs/diagrams/charts/editing"
---

# Editing in the picture

In an editable editor, a double click on a text of a chart opens a field over it with that text, and the new text is written into the chart's data or settings.

## Renaming a text

| Text                            | Written with                                    |
| ------------------------------- | ----------------------------------------------- |
| The title                       | `updateChartSpec`, as `spec.title`              |
| An axis title                   | `updateChartAxis`, as `title` of that axis      |
| A series name in the legend     | `updateChartData`, as the header of its column  |
| A category label, or a pie part | `updateChartData`, as the label cell of its row |

- **Enter, or leaving the field,** writes the text, as one undo step.
- **Escape** closes the field unchanged.
- **A column keeps its id** when its header is renamed, so `spec.series` still applies to it.
- **With `encoding.seriesIn: 'rows'`** a series name is the label cell of a row, and a category
  label is a column header.
- **A chart linked to a read-only Data Source** opens the field for its title and axis titles
  only. Its series and categories are the source's.
- **The Renderer finds the text.** The ECharts and d3 Renderers do. The Mermaid chart Renderer
  shows the picture only. A Renderer of your own reports texts through
  [`onTextDoubleClick`](https://tiptap.dev/docs/diagrams/renderers/custom.md#text-in-the-picture).
- **Value labels** on an axis are not stored, so they open nothing.

## Without a picture

`renameChartDataText` from `@tiptap-pro/extension-diagrams/core` renames a series or a category
in Chart Data without a picture.

```ts
import { parseChartSyntax, renameChartDataText } from '@tiptap-pro/extension-diagrams/core'

const { data } = parseChartSyntax('Month | Sales\nJan | 2\nFeb | 4')
const renamed = renameChartDataText({
  data,
  target: { kind: 'series', column: 'sales' },
  text: 'Revenue',
})
editor.commands.updateChartData({ data: renamed ?? data })
```