Skip to main content

Overview

Locales control how Graphy parses and interprets data values, particularly dates and numbers. The locale affects:
  • Date parsing (DD/MM/YYYY vs MM/DD/YYYY)
  • Number formats (decimal separators, thousand separators)
  • Currency symbols

Supported locales

Currently, Graphy supports two locales:
en-GB
locale
British English
  • Date format: DD/MM/YYYY
  • Decimal separator: . (period)
  • Thousand separator: , (comma)
  • Example: 15/03/2024 is parsed as 15th March 2024
en-US
locale
US English (default)
  • Date format: MM/DD/YYYY
  • Decimal separator: . (period)
  • Thousand separator: , (comma)
  • Example: 03/15/2024 is parsed as 15th March 2024

Setting the parsing locale

Set the locale in your data metadata:
const config: GraphConfig = {
  data: {
    columns: [
      { key: 'date', label: 'Date' },
      { key: 'value', label: 'Value' }
    ],
    rows: [
      { date: '15/03/2024', value: 1000 },
      { date: '16/03/2024', value: 1200 }
    ],
    _metadata: {
      parsingLocale: 'en-GB'  // Parse dates as DD/MM/YYYY
    }
  }
};

Default locale

If no locale is specified, Graphy defaults to 'en-US'. This means dates are expected in MM/DD/YYYY format.

Examples

British English locale

const config: GraphConfig = {
  data: {
    columns: [
      { key: 'date', label: 'Date' },
      { key: 'amount', label: 'Amount' }
    ],
    rows: [
      { date: '01/04/2024', amount: '1,250.50' },  // 1st April 2024
      { date: '02/04/2024', amount: '1,350.75' }   // 2nd April 2024
    ],
    _metadata: {
      parsingLocale: 'en-GB'
    }
  }
};

US English locale

const config: GraphConfig = {
  data: {
    columns: [
      { key: 'date', label: 'Date' },
      { key: 'amount', label: 'Amount' }
    ],
    rows: [
      { date: '04/01/2024', amount: '1,250.50' },  // 1st April 2024
      { date: '04/02/2024', amount: '1,350.75' }   // 2nd April 2024
    ],
    _metadata: {
      parsingLocale: 'en-US'
    }
  }
};

TypeScript type

type Locale = 'en-GB' | 'en-US';