Editing in the chart | Tiptap Diagrams Docs

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

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

PreviouslyLooks

Next upAxes