Internationalization

Graphy uses two separate locale systems:

Type	Purpose	How to set
Data Locale	Parses dates and numbers in your dataset	`data._metadata.parsingLocale`
UI Locale	Renders text in the visualization and editor	`uiLocale` prop on `GraphProvider`

These are independent — you can parse data in one format while displaying the UI in another language.

Data Locale

The data locale controls how Graphy interprets dates and numbers in your dataset.

Locale	Date format	Example
`en-US` (default)	MM/DD/YYYY	`03/15/2024` → 15th March
`en-GB`	DD/MM/YYYY	`15/03/2024` → 15th March

Set it in your data configuration:

const config: GraphConfig = {
  data: {
    columns: [...],
    rows: [...],
    _metadata: {
      parsingLocale: 'en-GB'
    }
  }
};

UI Locale

The UI locale controls all text displayed in the visualization and editor, including labels, tooltips, and menu items. It also determines the text direction (LTR or RTL).

Available locales

Locale	Language	Text Direction
`en-GB`	English (UK)	LTR
`en-US`	English (US)	LTR
`pt-PT`	Portuguese	LTR
`ar`	Arabic	RTL

Setting the UI locale

import { GraphProvider } from '@graphy/core';

<GraphProvider uiLocale="ar">
  <Graph config={config} />
</GraphProvider>

Example: Different data and UI locales

You might have data formatted for a UK audience but want to display the UI in Arabic:

const config: GraphConfig = {
  data: {
    columns: [...],
    rows: [...],
    _metadata: {
      parsingLocale: 'en-GB' // Parse dates as DD/MM/YYYY
    }
  }
};

{/* Display UI in Arabic (RTL) */}
<GraphProvider uiLocale="ar"> 
  <Graph config={config} />
</GraphProvider>

Runtime overrides

The i18nOverrides prop on GraphProvider allows you to customize translations and text direction at runtime, without switching the entire locale.

Overriding strings

Override any UI text by providing translation keys:

<GraphProvider
  i18nOverrides={{
    'editor.graphTypes.bar': 'Barra',
    'graph.axisLabels.placeholder': 'Añadir etiqueta',
  }}
>
  <Graph />
</GraphProvider>

Some strings accept parameters. Provide a function to handle dynamic values:

<GraphProvider
  i18nOverrides={{
    'graph.defaultPropertyLabels.columnNumber': ({ number }) => `Columna ${number}`,
    'common.confirmDelete': ({ item }) => `¿Eliminar ${item}?`,
  }}
>
  <Graph />
</GraphProvider>

Overriding text direction (RTL support)

Text direction is automatically determined by the selected locale (e.g., Arabic uses RTL). You can override it manually using the dir property:

<GraphProvider
  i18nOverrides={{
    dir: 'rtl',
  }}
>
  <Graph config={config} />
</GraphProvider>

Valid values are 'ltr' (left-to-right) and 'rtl' (right-to-left). This is useful when you want to:

Force RTL layout while using an LTR locale’s translations
Force LTR layout while using an RTL locale’s translations
Test RTL behavior during development

Combining overrides

You can combine string overrides with text direction in a single configuration:

<GraphProvider
  i18nOverrides={{
    dir: 'rtl',
    'graph.axisLabels.placeholder': 'إضافة تسمية',
    'editor.graphTypes.bar': 'شريط',
  }}
>
  <Graph config={config} />
</GraphProvider>

String reference

Common

Key	Default	Parameters
`common.save`	”Save”	-
`common.cancel`	”Cancel”	-
`common.confirm`	”Confirm”	-
`common.delete`	”Delete”	-
`common.confirmDelete`	”Are you sure you want to delete $?”	`{ item }`
`common.abbreviations.thousands`	”k”	-
`common.abbreviations.millions`	”m”	-
`common.abbreviations.billions`	”b”	-

Graph - General

Key	Default	Parameters
`graph.loading`	”Loading”	-
`graph.error`	”Something went wrong”	-
`graph.axisLabels.placeholder`	”Add label”	-

Graph - Default property labels

Key	Default	Parameters
`graph.defaultPropertyLabels.date`	”Date”	-
`graph.defaultPropertyLabels.year`	”Year”	-
`graph.defaultPropertyLabels.quarter`	”Quarter”	-
`graph.defaultPropertyLabels.month`	”Month”	-
`graph.defaultPropertyLabels.week`	”Week”	-
`graph.defaultPropertyLabels.series`	”Series”	-
`graph.defaultPropertyLabels.category`	”Category”	-
`graph.defaultPropertyLabels.columnNumber`	”Column $“	`{ number }`
`graph.defaultPropertyLabels.rowNumber`	”Row $“	`{ number }`
`graph.defaultPropertyLabels.seriesNumber`	”Series $“	`{ number }`

Graph - Trend comparisons

Key	Default	Parameters
`graph.trendComparison.fromPrevious.long`	”$ vs previous”	`{ value }`
`graph.trendComparison.fromPrevious.short`	”$ vs prev”	`{ value }`
`graph.trendComparison.fromPreviousYear.long`	”$ vs previous year”	`{ value }`
`graph.trendComparison.fromPreviousYear.short`	”$ vs prev year”	`{ value }`
`graph.trendComparison.fromPreviousMonth.long`	”$ vs previous month”	`{ value }`
`graph.trendComparison.fromPreviousMonth.short`	”$ vs prev month”	`{ value }`
`graph.trendComparison.fromPreviousWeek.long`	”$ vs previous week”	`{ value }`
`graph.trendComparison.fromPreviousWeek.short`	”$ vs prev week”	`{ value }`
`graph.trendComparison.fromPreviousDay.long`	”$ vs previous day”	`{ value }`
`graph.trendComparison.fromPreviousDay.short`	”$ vs prev day”	`{ value }`
`graph.trendComparison.fromPreviousHour.long`	”$ vs previous hour”	`{ value }`
`graph.trendComparison.fromPreviousHour.short`	”$ vs prev hour”	`{ value }`

Graph - Headline metrics

Key	Default	Parameters
`graph.headlineMetrics.averageLong`	”Average $“	`{ value }`
`graph.headlineMetrics.averageShort`	”Avg. $“	`{ value }`
`graph.headlineMetrics.total`	”Total $“	`{ value }`
`graph.headlineMetrics.totalConversionRate`	”Total conversion rate $“	`{ value }`
`graph.headlineMetrics.current`	”$“	`{ value }`

Graph - Title editor

Key	Default
`graph.titleEditor.titlePlaceholder`	”Untitled”
`graph.titleEditor.subtitlePlaceholder`	”Add a subtitle”

Key	Default
`graph.toolbar.formatting.bold`	”Bold”
`graph.toolbar.formatting.italic`	”Italic”
`graph.toolbar.formatting.underline`	”Underline”
`graph.toolbar.formatting.link`	”Link”

Key	Default
`graph.toolbar.link.ariaLabel`	”Create link”
`graph.toolbar.link.placeholder`	”Type or paste a link…”
`graph.toolbar.link.submit`	”Submit”

Key	Default
`graph.toolbar.font.label`	”Font”

Key	Default
`graph.toolbar.heading.label`	”Heading level”
`graph.toolbar.heading.text`	”Text”
`graph.toolbar.heading.caption`	”Caption”
`graph.toolbar.heading.heading1`	”Heading 1”
`graph.toolbar.heading.heading2`	”Heading 2”
`graph.toolbar.heading.heading3`	”Heading 3”

Key	Default
`graph.toolbar.textAlign.left`	”Align left”
`graph.toolbar.textAlign.center`	”Align center”
`graph.toolbar.textAlign.right`	”Align right”

Key	Default
`graph.toolbar.color.label`	”Text color”

Key	Default
`graph.colorDropdown.colors`	”Colors”
`graph.colorDropdown.chartColors`	”Chart colors”
`graph.colorDropdown.custom`	”Custom”
`graph.colorDropdown.opacity`	”Opacity”
`graph.colorDropdown.transparent`	”Transparent”

Key	Default	Parameters
`graph.annotations.baseMenu.pinNumber`	”Pin number”	-
`graph.annotations.baseMenu.annotate`	”Annotate”	-
`graph.annotations.baseMenu.highlight`	”Highlight”	-
`graph.annotations.baseMenu.highlightWithLabel`	”Highlight $“	`{ label }`
`graph.annotations.baseMenu.removeHighlight`	”Remove highlight”	-
`graph.annotations.baseMenu.differenceArrow`	”Difference arrow”	-
`graph.annotations.baseMenu.addSticker`	”Add sticker”	-

Key	Default
`graph.annotations.textMenu.title`	”Annotate”
`graph.annotations.textMenu.placeholder`	”Add a comment”
`graph.annotations.textMenu.addButton`	”Add”

Graph - Annotations highlights

Key	Default
`graph.annotations.highlights.menuTitle`	”Highlight”
`graph.annotations.highlights.labels.bar`	”Bar”
`graph.annotations.highlights.labels.barGroup`	”Group”
`graph.annotations.highlights.labels.barStack`	”Stack”
`graph.annotations.highlights.labels.barSeries`	”Series”
`graph.annotations.highlights.labels.line`	”Line”
`graph.annotations.highlights.labels.linePoint`	”Point”
`graph.annotations.highlights.labels.lineSeries`	”Series”
`graph.annotations.highlights.labels.scatterPoint`	”Point”
`graph.annotations.highlights.labels.scatterSeries`	”Series”
`graph.annotations.highlights.labels.pieSlice`	”Slice”
`graph.annotations.highlights.labels.pointOrBar`	”Point / bar”
`graph.annotations.highlights.labels.lineOrSeries`	”Line / series”

Key	Default
`graph.annotations.stickerMenu.title`	”Add sticker”

Graph - Annotations delete

Key	Default
`graph.annotations.delete`	”Delete”

Graph - Annotations arrow

Key	Default
`graph.annotations.arrow.thickness.label`	”Thickness”
`graph.annotations.arrow.thickness.thin`	”Thin”
`graph.annotations.arrow.thickness.medium`	”Medium”
`graph.annotations.arrow.thickness.thick`	”Thick”
`graph.annotations.arrow.arrowhead.startPoint`	”Start point”
`graph.annotations.arrow.arrowhead.endPoint`	”End point”
`graph.annotations.arrow.arrowhead.lineArrow`	”Line arrow”
`graph.annotations.arrow.arrowhead.none`	”None”
`graph.annotations.arrow.lineStyle.label`	”Line style”
`graph.annotations.arrow.lineStyle.solid`	”Solid”
`graph.annotations.arrow.lineStyle.dotted`	”Dotted”
`graph.annotations.arrow.stickerEffect`	”Sticker effect”
`graph.annotations.arrow.toolbarAriaLabel`	”Free-form arrow toolbar”
`graph.annotations.arrow.editorAriaLabel`	”Arrow editor”

Graph - Annotations difference arrow

Key	Default	Parameters
`graph.annotations.differenceArrow.type.proportion`	”Proportion”	-
`graph.annotations.differenceArrow.type.difference`	”Difference ($)“	`{ absoluteDifference }`
`graph.annotations.differenceArrow.type.increase`	”Increase ($)“	`{ absoluteDifference }`
`graph.annotations.differenceArrow.type.decrease`	”Decrease ($)“	`{ absoluteDifference }`
`graph.annotations.differenceArrow.type.percentageChange`	”Percentage change ($)“	`{ percentageChange }`
`graph.annotations.differenceArrow.type.percentIncrease`	”Percent increase ($)“	`{ percentageChange }`
`graph.annotations.differenceArrow.type.percentDecrease`	”Percent decrease ($)“	`{ percentageChange }`
`graph.annotations.differenceArrow.size.label`	”Size”	-
`graph.annotations.differenceArrow.size.small`	”Small”	-
`graph.annotations.differenceArrow.size.medium`	”Medium”	-
`graph.annotations.differenceArrow.size.large`	”Large”	-
`graph.annotations.differenceArrow.flipArrow`	”Flip arrow”	-
`graph.annotations.differenceArrow.color`	”Color”	-
`graph.annotations.differenceArrow.toolbarAriaLabel`	”Difference arrow toolbar”	-
`graph.annotations.differenceArrow.editorAriaLabel`	”Difference arrow editor”	-

Graph - Annotations shape

Key	Default	Parameters
`graph.annotations.shape.color`	”Color”	-
`graph.annotations.shape.border.label`	”Border”	-
`graph.annotations.shape.border.none`	”None”	-
`graph.annotations.shape.border.thin`	”Thin ($)“	`{ value }`
`graph.annotations.shape.border.medium`	”Medium ($)“	`{ value }`
`graph.annotations.shape.border.thick`	”Thick ($)“	`{ value }`

Editor - General

Key	Default
`editor.title`	”Graphy Editor”
`editor.description`	”Edit your content here”

Editor - Graph types

Key	Default
`editor.graphTypes.column`	”Column”
`editor.graphTypes.columnStacked`	”Stacked”
`editor.graphTypes.columnStackedFill`	”100% Stacked”
`editor.graphTypes.bar`	”Bar”
`editor.graphTypes.barStacked`	”Stacked”
`editor.graphTypes.barStackedFill`	”100% Stacked”
`editor.graphTypes.line`	”Line”
`editor.graphTypes.areaStacked`	”Stacked Area”
`editor.graphTypes.pie`	”Pie”
`editor.graphTypes.donut`	”Donut”
`editor.graphTypes.scatter`	”Scatter”
`editor.graphTypes.bubble`	”Bubble”
`editor.graphTypes.funnel`	”Funnel”
`editor.graphTypes.combo`	”Combo”
`editor.graphTypes.heatmap`	”Heatmap”
`editor.graphTypes.waterfall`	”Waterfall”
`editor.graphTypes.mekko`	”Mekko”
`editor.graphTypes.table`	”Table”

Editor - Size panel

Key	Default	Parameters
`editor.sizePanel.toolbarButton`	”Size”	-
`editor.sizePanel.presetsSection.title`	”Presets”	-
`editor.sizePanel.customSizeSection.title`	”Custom size”	-
`editor.sizePanel.presets.googleSlides`	”Google Slides / PowerPoint”	-
`editor.sizePanel.presets.webEmail`	”Web / email”	-
`editor.sizePanel.presets.linkedIn`	”LinkedIn post”	-
`editor.sizePanel.presets.instagram`	”Instagram post”	-
`editor.sizePanel.presets.tiktok`	”TikTok / Instagram story”	-
`editor.sizePanel.presets.twitter`	”X (Twitter)“	-
`editor.sizePanel.presets.mobile`	”Mobile”	-
`editor.sizePanel.inputs.unitLabel`	”px”	-
`editor.sizePanel.validation.maxSizeError`	”≤ $px”	`{ max }`
`editor.sizePanel.validation.minSizeError`	”≥ $px”	`{ min }`

Editor - Graph panel

Key	Default
`editor.graphPanel.toolbarButton`	”Graph”
`editor.graphPanel.graphTypeSection.title`	”Graph type”
`editor.graphPanel.graphOptionsSection.title`	”Graph options”
`editor.graphPanel.graphOptions.sortBars`	”Sort high → low”
`editor.graphPanel.graphOptions.gridLines`	”Grid lines”
`editor.graphPanel.graphOptions.showPoints`	”Show points”
`editor.graphPanel.graphOptions.smoothLines`	”Smooth lines”
`editor.graphPanel.graphOptions.stackTotals`	”Stack totals”
`editor.graphPanel.graphOptions.dataLabels`	”Data labels”
`editor.graphPanel.graphOptions.showPercentages`	”Show percentages”
`editor.graphPanel.graphOptions.categoryLabels`	”Category labels”
`editor.graphPanel.legendSection.title`	”Legend”
`editor.graphPanel.legendSection.right`	”Right”
`editor.graphPanel.legendSection.top`	”Top”
`editor.graphPanel.legendSection.none`	”None”
`editor.graphPanel.numberFormatSection.title`	”Number format”
`editor.graphPanel.numberFormat.abbreviationLabel`	”Abbreviation”
`editor.graphPanel.numberFormat.valueLabel`	”Value”
`editor.graphPanel.numberFormat.decimalPlacesLabel`	”Decimal places”
`editor.graphPanel.numberFormat.options.auto`	”Auto”
`editor.graphPanel.numberFormat.options.custom`	”Custom”
`editor.graphPanel.numberFormat.options.none`	”None”
`editor.graphPanel.headlineNumberSize.sizeLabel`	”Size”
`editor.graphPanel.headlineNumberSize.valueLabel`	”Value”
`editor.graphPanel.headlineNumberSize.sizes.small`	”S”
`editor.graphPanel.headlineNumberSize.sizes.medium`	”M”
`editor.graphPanel.headlineNumberSize.sizes.large`	”L”
`editor.graphPanel.lineThickness.label`	”Line thickness”
`editor.graphPanel.pointSize.label`	”Point size”
`editor.graphPanel.pointSize.options.auto`	”Auto”
`editor.graphPanel.pointSize.options.custom`	”Custom”

Editor - Headline number section

Key	Default
`editor.graphPanel.headlineNumberSection.title`	”Headline number”
`editor.graphPanel.headlineNumberSection.toggle`	”Visible”
`editor.graphPanel.headlineNumberSection.metricLabel`	”Metric”
`editor.graphPanel.headlineNumberSection.compareWithLabel`	”Compare with”
`editor.graphPanel.headlineNumberSection.metrics.total`	”Total”
`editor.graphPanel.headlineNumberSection.metrics.average`	”Avg.”
`editor.graphPanel.headlineNumberSection.metrics.current`	”Last”
`editor.graphPanel.headlineNumberSection.metrics.conversion`	”Conversion”
`editor.graphPanel.headlineNumberSection.metrics.left`	”Left”
`editor.graphPanel.headlineNumberSection.comparison.first`	”First”
`editor.graphPanel.headlineNumberSection.comparison.previous`	”Previous”
`editor.graphPanel.headlineNumberSection.pieTotalPosition.left`	”Left”
`editor.graphPanel.headlineNumberSection.pieTotalPosition.center`	”Center”

Editor - Treat empty values

Key	Default
`editor.graphPanel.treatEmptyValues.leaveGap.label`	”Leave gap in chart”
`editor.graphPanel.treatEmptyValues.leaveGap.description`	”Leaves a visible break in the line where data is missing”
`editor.graphPanel.treatEmptyValues.fillZero.label`	”Fill with zero”
`editor.graphPanel.treatEmptyValues.fillZero.description`	”Displays missing data points as zero”
`editor.graphPanel.treatEmptyValues.connectGaps.label`	”Connect across gaps”
`editor.graphPanel.treatEmptyValues.connectGaps.description`	”Joins the line between available points, skipping the gap”

Editor - Combo chart appearance

Key	Default
`editor.graphPanel.comboChartAppearance.title`	”Combo chart appearance”
`editor.graphPanel.comboChartAppearance.groupedBars`	”Grouped bars”
`editor.graphPanel.comboChartAppearance.stackedBars`	”Stacked bars”
`editor.graphPanel.comboChartAppearance.linesOnly`	”Lines only”

Editor - Property mapping

Key	Default
`editor.propertyMapping.title`	”Data”
`editor.propertyMapping.xAxis`	”X-Axis”
`editor.propertyMapping.yAxis`	”Y-Axis”
`editor.propertyMapping.leftYAxis`	”Y-Axis (left)“
`editor.propertyMapping.rightYAxis`	”Y-Axis (right)“
`editor.propertyMapping.slices`	”Values (slices)“
`editor.propertyMapping.labels`	”Labels”
`editor.propertyMapping.size`	”Size”
`editor.propertyMapping.shape`	”Shape”
`editor.propertyMapping.reset`	”Reset all changes”
`editor.propertyMapping.addSeries`	”Add another”
`editor.propertyMapping.removeSeries`	”Remove series”

Editor - Axes panel

Key	Default
`editor.axesPanel.toolbarButton`	”Axes”
`editor.axesPanel.mainAxisSection.yAxis`	”Y-Axis”
`editor.axesPanel.mainAxisSection.xAxis`	”X-Axis”
`editor.axesPanel.crossAxisSection.xAxis`	”X-Axis”
`editor.axesPanel.crossAxisSection.yAxis`	”Y-Axis”
`editor.axesPanel.controls.visible`	”Visible”
`editor.axesPanel.controls.labels`	”Labels”
`editor.axesPanel.controls.position`	”Position”
`editor.axesPanel.controls.scale`	”Scale”
`editor.axesPanel.controls.startFrom`	”Start from”
`editor.axesPanel.controls.endAt`	”End at”
`editor.axesPanel.controls.value`	”Value”
`editor.axesPanel.controls.numberOfAxes`	”Number of axes”
`editor.axesPanel.controls.reverse`	”Reverse”
`editor.axesPanel.labelMode.auto`	”Auto”
`editor.axesPanel.labelMode.edges`	”Edges”
`editor.axesPanel.scale.auto`	”Auto”
`editor.axesPanel.scale.log`	”Log”
`editor.axesPanel.startFrom.auto`	”Auto”
`editor.axesPanel.startFrom.zero`	”Zero”
`editor.axesPanel.startFrom.custom`	”Custom”
`editor.axesPanel.endAt.auto`	”Auto”
`editor.axesPanel.endAt.custom`	”Custom”
`editor.axesPanel.axisCount.single`	”Single”
`editor.axesPanel.axisCount.double`	”Double”
`editor.axesPanel.position.left`	”Left”
`editor.axesPanel.position.right`	”Right”
`editor.axesPanel.position.top`	”Top”
`editor.axesPanel.position.bottom`	”Bottom”
`editor.axesPanel.yesNo.yes`	”Yes”
`editor.axesPanel.yesNo.no`	”No”

Editor - Color panel

Key	Default
`editor.colorPanel.toolbarButton`	”Color”
`editor.colorPanel.themeSection.title`	”Theme”
`editor.colorPanel.paletteSection.title`	”Palette”
`editor.colorPanel.paletteSection.colorScheme`	”Color scheme”
`editor.colorPanel.paletteSection.colors`	”Colors”
`editor.colorPanel.paletteSection.colorPalettes`	”Color palettes”
`editor.colorPanel.paletteMode.preset`	”Preset”
`editor.colorPanel.paletteMode.brand`	”Brand”
`editor.colorPanel.paletteMode.freestyle`	”Freestyle”
`editor.colorPanel.paletteThemes.colorful`	”Colorful”
`editor.colorPanel.paletteThemes.pastel`	”Pastel”
`editor.colorPanel.paletteThemes.neon`	”Neon”
`editor.colorPanel.backgroundSection.title`	”Background”
`editor.colorPanel.backgroundSection.black`	”Black”
`editor.colorPanel.backgroundSection.white`	”White”
`editor.colorPanel.backgroundSection.grey`	”Grey”
`editor.colorPanel.backgroundSection.tint`	”Tint”
`editor.colorPanel.backgroundSection.custom`	”Custom”
`editor.colorPanel.backgroundSection.none`	”None”
`editor.colorPanel.borderSection.title`	”Border”
`editor.colorPanel.borderSection.borderColor`	”Border color”
`editor.colorPanel.borderSection.thickness`	”Thickness”
`editor.colorPanel.borderSection.cornerRadius`	”Corner radius”
`editor.colorPanel.borderType.solid`	”Solid”
`editor.colorPanel.borderType.gradient`	”Gradient”
`editor.colorPanel.borderType.grey`	”Grey”
`editor.colorPanel.borderType.preset`	”Preset”
`editor.colorPanel.borderType.custom`	”Custom”
`editor.colorPanel.borderType.none`	”None”
`editor.colorPanel.presetGradients.lilac`	”Lilac”
`editor.colorPanel.presetGradients.neonPink`	”Neon Pink”
`editor.colorPanel.presetGradients.blackberry`	”Blackberry”
`editor.colorPanel.presetGradients.sun`	”Sun”
`editor.colorPanel.presetGradients.iceland`	”Iceland”
`editor.colorPanel.presetGradients.sunset`	”Sunset”
`editor.colorPanel.presetGradients.ultraviolet`	”Ultraviolet”
`editor.colorPanel.presetGradients.purple`	”Purple”
`editor.colorPanel.presetGradients.iceCream`	”Ice Cream”
`editor.colorPanel.presetGradients.mint`	”Mint”
`editor.colorPanel.presetGradients.cool`	”Cool”
`editor.colorPanel.presetGradients.fresh`	”Fresh”

Editor - Design panel

Key	Default
`editor.designPanel.toolbarButton`	”Design”
`editor.designPanel.defaultExpanded`	”Palette”

Editor - Annotate panel

Key	Default
`editor.annotatePanel.toolbarButton`	”Annotate”
`editor.annotatePanel.callOutSection.title`	”Call-out”
`editor.annotatePanel.callOutSection.text`	”Text”
`editor.annotatePanel.callOutSection.arrow`	”Arrow”
`editor.annotatePanel.callOutSection.box`	”Box”
`editor.annotatePanel.callOutSection.differenceArrows`	”Difference arrows”
`editor.annotatePanel.highlightSection.title`	”Highlight”
`editor.annotatePanel.highlightSection.button`	”Highlight”
`editor.annotatePanel.highlightSection.colorLabel`	”Highlight color”

Editor - Annotations panel

Key	Default
`editor.annotationsPanel.toolbarButton`	”Annotate”
`editor.annotationsPanel.freeformSection.title`	”Freeform”
`editor.annotationsPanel.freeformSection.text`	”Text”
`editor.annotationsPanel.freeformSection.arrow`	”Arrow”
`editor.annotationsPanel.freeformSection.box`	”Box”
`editor.annotationsPanel.freeformSection.difference`	”Difference”
`editor.annotationsPanel.goalSection.title`	”Goal”
`editor.annotationsPanel.goalSection.labelControl`	”Label”
`editor.annotationsPanel.goalSection.labelPlaceholder`	”Goal”
`editor.annotationsPanel.goalSection.labelAriaLabel`	”Custom goal label”
`editor.annotationsPanel.goalSection.valueControl`	”Goal value”
`editor.annotationsPanel.goalSection.valueAriaLabel`	”Goal value”
`editor.annotationsPanel.goalSection.byDate`	”By date”
`editor.annotationsPanel.goalSection.xAxisValue`	”X-axis value”
`editor.annotationsPanel.goalSection.optional`	”(optional)“
`editor.annotationsPanel.trendsAndAveragesSection.title`	”Trends and Averages”
`editor.annotationsPanel.trendsAndAveragesSection.trend`	”Trend”
`editor.annotationsPanel.trendsAndAveragesSection.average`	”Average”
`editor.annotationsPanel.trendType.label`	”Trend type”
`editor.annotationsPanel.trendType.placeholder`	”Trend type”
`editor.annotationsPanel.trendType.options.linear`	”Linear”
`editor.annotationsPanel.trendType.options.exponential`	”Exponential”
`editor.annotationsPanel.trendType.options.quadratic`	”Quadratic”
`editor.annotationsPanel.trendType.options.polynomial`	”Polynomial”
`editor.annotationsPanel.trendType.options.logarithmic`	”Logarithmic”
`editor.annotationsPanel.trendType.options.power`	”Power”
`editor.annotationsPanel.trendType.options.loess`	”Loess”
`editor.annotationsPanel.averageLineSeries.label`	”Average line series”
`editor.annotationsPanel.averageLineSeries.placeholder`	”Select series”
`editor.annotationsPanel.averageLineSeries.ariaLabel`	”Series dropdown for average line”
`editor.annotationsPanel.highlightSection.title`	”Highlight”
`editor.annotationsPanel.highlightSection.button`	”Highlight”
`editor.annotationsPanel.highlightSection.fadeColorLabel`	”Fade color”
`editor.annotationsPanel.titleAndSubtitleSection.title`	”Title & Subtitle”
`editor.annotationsPanel.titleAndSubtitleSection.toggleTitle`	”Title”
`editor.annotationsPanel.titleAndSubtitleSection.subtitle`	”Subtitle”
`editor.annotationsPanel.captionAndSourceSection.title`	”Caption & Source”
`editor.annotationsPanel.captionAndSourceSection.caption`	”Caption”
`editor.annotationsPanel.captionAndSourceSection.source`	”Source”
`editor.annotationsPanel.captionAndSourceSection.url`	”URL”
`editor.annotationsPanel.captionAndSourceSection.name`	”Name”

Editor - Elements panel

Key	Default	Parameters
`editor.elementsPanel.toolbarButton`	”Elements”	-
`editor.elementsPanel.headerSection.title`	”Header”	-
`editor.elementsPanel.headerSection.toggleTitle`	”Title”	-
`editor.elementsPanel.headerSection.subtitle`	”Subtitle”	-
`editor.elementsPanel.footerSection.title`	”Footer”	-
`editor.elementsPanel.footerSection.caption`	”Caption”	-
`editor.elementsPanel.footerSection.source`	”Source”	-
`editor.elementsPanel.footerSection.url`	”URL”	-
`editor.elementsPanel.footerSection.name`	”Name”	-
`editor.elementsPanel.textSizeSection.title`	”Text size”	-
`editor.elementsPanel.textSizeSection.scaleFormat`	”$x”	`{ value }`
`editor.elementsPanel.fontSection.title`	”Font”	-
`editor.elementsPanel.sourceSection.title`	”Source”	-
`editor.elementsPanel.sourceSection.url`	”URL”	-
`editor.elementsPanel.sourceSection.name`	”Name”	-

Editor - Power-ups panel

Key	Default
`editor.powerUpPanel.toolbarButton`	”Power-ups”
`editor.powerUpPanel.goalSection.title`	”Goal”
`editor.powerUpPanel.goalSection.toggle`	”Goal”
`editor.powerUpPanel.goalSection.labelControl`	”Label”
`editor.powerUpPanel.goalSection.labelPlaceholder`	”Goal”
`editor.powerUpPanel.goalSection.labelAriaLabel`	”Custom goal label”
`editor.powerUpPanel.goalSection.valueControl`	”Goal value”
`editor.powerUpPanel.goalSection.byDate`	”By date”
`editor.powerUpPanel.goalSection.xAxisValue`	”X-axis value”
`editor.powerUpPanel.goalSection.optional`	” (optional)“
`editor.powerUpPanel.goalSection.xAxisReferenceAriaLabel`	”X-axis reference value”
`editor.powerUpPanel.goalSection.anyXAxisValue`	”Any x-axis value”
`editor.powerUpPanel.goalSection.selectValuePlaceholder`	”Select value”
`editor.powerUpPanel.trendSection.title`	”Trend”
`editor.powerUpPanel.trendSection.toggle`	”Trend”
`editor.powerUpPanel.averageSection.title`	”Average”
`editor.powerUpPanel.averageSection.toggle`	”Average”
`editor.powerUpPanel.averageSection.seriesLabel`	”Average line series”
`editor.powerUpPanel.averageSection.seriesPlaceholder`	”Select series”
`editor.powerUpPanel.averageSection.seriesAriaLabel`	”Series dropdown for average line”
`editor.powerUpPanel.trendType.label`	”Trend type”
`editor.powerUpPanel.trendType.placeholder`	”Trend type”
`editor.powerUpPanel.trendType.options.linear`	”Linear”
`editor.powerUpPanel.trendType.options.exponential`	”Exponential”
`editor.powerUpPanel.trendType.options.quadratic`	”Quadratic”
`editor.powerUpPanel.trendType.options.polynomial`	”Polynomial”
`editor.powerUpPanel.trendType.options.logarithmic`	”Logarithmic”
`editor.powerUpPanel.trendType.options.power`	”Power”
`editor.powerUpPanel.trendType.options.loess`	”Loess”
`editor.powerUpPanel.valueInput.percentagePlaceholder`	”Percentage”
`editor.powerUpPanel.valueInput.numberPlaceholder`	”Number”
`editor.powerUpPanel.valueInput.percentageSymbol`	”%“

Editor - Highlighting

Key	Default
`editor.highlighting.modeHelper.title`	”Highlight mode”
`editor.highlighting.modeHelper.hover`	”Hover”
`editor.highlighting.modeHelper.toHighlight`	”to highlight”
`editor.highlighting.modeHelper.anyElement`	”any element”
`editor.highlighting.modeHelper.escToExit`	”to exit”
`editor.highlighting.modeHelper.esc`	”ESC”
`editor.highlighting.emptyState`	”No highlight options available”
`editor.highlighting.deleteAriaLabel`	”Delete highlight”
`editor.highlighting.highlightStyle.tint`	”Tint”
`editor.highlighting.highlightStyle.grey`	”Grey”

Editor - Fine tune panel

Key	Default
`editor.fineTunePanel.toolbarButton`	”Fine tune”
`editor.fineTunePanel.detailSection.title`	”Detail”
`editor.fineTunePanel.detailSection.missingValues`	”Missing values”
`editor.fineTunePanel.lineStyleSection.title`	”Line style”
`editor.fineTunePanel.lineStyleSection.lineCurve`	”Line curve”
`editor.fineTunePanel.lineStyleSection.sharp`	”Sharp”
`editor.fineTunePanel.lineStyleSection.smooth`	”Smooth”

Editor - Custom theme editor

Key	Default
`editor.customThemeEditor.patternDropdownAriaLabel`	”Pattern dropdown for series”
`editor.customThemeEditor.patterns.solid`	”Solid”
`editor.customThemeEditor.patterns.pattern`	”Pattern”
`editor.customThemeEditor.patterns.dotted`	”Dotted”
`editor.customThemeEditor.patterns.dashed`	”Dashed”
`editor.customThemeEditor.patterns.hatched`	”Hatched”
`editor.customThemeEditor.heatmapColorLabel`	”Color”

Editor - Accessibility

Key	Default	Parameters
`editor.accessibility.toggleSection`	”Toggle $ section”	`{ title }`

Editor - Graphy defaults

Key	Default
`editor.graphyDefaults.themeOptions.light`	”Light”
`editor.graphyDefaults.themeOptions.dark`	”Dark”

Get started

Graph types

Theming

Configuration

Editor

Advanced

Reference

​Data Locale

​UI Locale

​Available locales

​Setting the UI locale

​Example: Different data and UI locales

​Runtime overrides

​Overriding strings

​Overriding text direction (RTL support)

​Combining overrides

​String reference

​Common

​Graph - General

​Graph - Default property labels

​Graph - Trend comparisons

​Graph - Headline metrics

​Graph - Title editor

​Graph - Text toolbar formatting

​Graph - Text toolbar link

​Graph - Text toolbar font

​Graph - Text toolbar heading

​Graph - Text toolbar alignment

​Graph - Text toolbar color

​Graph - Color dropdown

​Graph - Annotations base menu

​Graph - Annotations text menu

​Graph - Annotations highlights

​Graph - Annotations sticker menu

​Graph - Annotations delete

​Graph - Annotations arrow

​Graph - Annotations difference arrow

​Graph - Annotations shape

​Editor - General

​Editor - Graph types

​Editor - Size panel

​Editor - Graph panel

​Editor - Headline number section

​Editor - Treat empty values

​Editor - Combo chart appearance

​Editor - Property mapping

​Editor - Axes panel

​Editor - Color panel

​Editor - Design panel

​Editor - Annotate panel

​Editor - Annotations panel

​Editor - Elements panel

​Editor - Power-ups panel

​Editor - Highlighting

​Editor - Fine tune panel

​Editor - Custom theme editor

​Editor - Accessibility

​Editor - Graphy defaults