---
title: "Editing in the chart"
description: "Double-click a text in a drawn chart, such as its title or a series name, and a text field opens over it."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/editing"
---

# Editing in the chart

Double-click a text in a drawn chart, such as its title or a series name, and a text field opens over it.

## Renaming a text

| Text you double-click            | Command that writes it, and where               |
| -------------------------------- | ----------------------------------------------- |
| The title                        | `updateChartSpec`, as `spec.title`              |
| An axis title                    | `updateChartAxis`, as the `title` of that axis  |
| A series name in the legend      | `updateChartData`, as the header of its column  |
| A category label, or a pie slice | `updateChartData`, as the label cell of its row |

**Confirming and canceling.** Enter, or moving the focus out of the text field, writes the text
in one undo step. Escape closes the text field and changes nothing.

**Column ids.** A column keeps its id when you rename its header, so `spec.series` still applies
to it.

**Rows as series.** With `encoding.seriesIn: 'rows'`, a series name is the label cell of a row,
and a category label is a column header.

**Read-only data.** On a chart linked to a read-only Data Source, only the title and the axis
titles open a text field. The series and categories come from the source.

**Which Renderers support it.** Not every Renderer does.
[Text in the chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/custom.md#text-in-the-chart) says which.

**Value labels.** The numbers along the value axis are not stored, so double-clicking them opens
nothing.

## Without a drawn chart

`renameChartDataText` from `@tiptap-pro/extension-diagrams/core` renames a series or a category
in Chart Data. It returns the new Chart Data, or `null` when the target
is not a series or a category of that data.

```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 })
```