### Install Dependencies

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/get-started.md

Install the necessary packages for Gravity UI Charts and its peer dependency, uikit.

```shell
npm install @gravity-ui/uikit @gravity-ui/charts
```

--------------------------------

### Start Development Server with Storybook

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/development.md

Run this command to launch the development server and access Storybook at http://localhost:7007.

```shell
npm run start
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/development.md

Use these commands to clone the project repository and install all necessary npm dependencies.

```shell
git clone https://github.com/gravity-ui/charts.git
cd charts
npm ci
```

--------------------------------

### HTML Data Labels for Line Series

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

This example demonstrates using HTML content for data labels in a line series. It allows for custom styling of individual data point labels, such as applying bold text and specific colors.

```javascript
series: {
  data: [{
    type: 'line',
    dataLabels: {
      enabled: true,
      html: true,
    },
    data: [
      {x: 1, y: 540, label: '<b style="color:#4fc4b7">540</b>'},
      {x: 2, y: 820, label: '<b style="color:#e8684a">820</b>'},
    ],
  }],
}
```

--------------------------------

### Sanitize User Input with DOMPurify or sanitize-html

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

When using HTML content from untrusted sources, sanitize it first. DOMPurify and sanitize-html are examples of libraries that can be used for this purpose. Apply sanitization before building the chart configuration.

```javascript
// DOMPurify
import DOMPurify from 'dompurify';
label: DOMPurify.sanitize(userInput);

// sanitize-html
import sanitizeHtml from 'sanitize-html';
label: sanitizeHtml(userInput, {
  allowedTags: ['b', 'i', 'span'],
  allowedAttributes: {span: ['style']},
});
```

```javascript
series: {
  data: [{
    type: 'bar-x',
    dataLabels: {enabled: true, html: true},
    data: [{
      x: 0,
      y: 1200,
      label: sanitize(userInput),
    }],
  }],
}
```

--------------------------------

### Override Chart CSS Custom Properties

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/theming.md

Define CSS custom properties on the element wrapping the Chart component to customize its appearance. This example shows how to change the axis tick color.

```css
.my-chart-container {
  --gcharts-axis-tick-color: #ccc;
}
```

--------------------------------

### Run Unit and Integration Tests

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/development.md

Execute this command to run the project's test suite.

```shell
npm test
```

--------------------------------

### Basic Chart Usage

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/get-started.md

Render a `Chart` component within a `ThemeProvider` and a container with an explicit height. The `Chart` component adapts to its parent's size.

```tsx
import {ThemeProvider} from '@gravity-ui/uikit';
import {Chart} from '@gravity-ui/charts';

const data = {
  series: {
    data: [
      {
        type: 'line',
        name: 'Temperature',
        data: [
          {x: 0, y: 10},
          {x: 1, y: 25},
          {x: 2, y: 18},
          {x: 3, y: 30},
        ],
      },
    ],
  },
};

export default function App() {
  return (
    <ThemeProvider theme="light">
      <div style={{height: 300}}>
        <Chart data={data} />
      </div>
    </ThemeProvider>
  );
}
```

--------------------------------

### Format Percentage Values

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Use 'percent' format with 'precision' to display decimal fractions as percentages. Ensure data is stored as decimal fractions.

```javascript
series: {
  data: [
    {
      type: 'line',
      data: [{x: 1, y: 0.156}, {x: 2, y: 0.234}, {x: 3, y: 0.389}],
      name: 'Conversion Rate',
    },
  ],
},
tooltip: {
  valueFormat: {
    type: 'number',
    format: 'percent',
    precision: 1, // Will display: 15.6%, 23.4%, 38.9%
  },
}
```

--------------------------------

### Import Styles

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/get-started.md

Import the required styles from `@gravity-ui/uikit` in your application's entry point. This ensures proper theming and UI rendering.

```tsx
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
```

--------------------------------

### Update Reference Screenshots for Visual Tests

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/development.md

Run this command to update the reference screenshots used for visual regression testing, typically after intentional UI changes.

```shell
npm run playwright:docker:update
```

--------------------------------

### Run Visual Regression Tests in Docker

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/development.md

Use this command to execute visual regression tests within a Docker container for consistent results.

```shell
npm run playwright:docker
```

--------------------------------

### Built-in Unit Presets

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Utilize pre-defined unit presets for common formatting needs. These presets are imported from '@gravity-ui/charts' and include options for bytes, bits, and general numbers. Reusing the same preset object can improve performance due to memoization.

```javascript
import {
  FORMAT_UNITS_BITS,
  FORMAT_UNITS_BYTES,
  FORMAT_UNITS_NUMBERS,
} from '@gravity-ui/charts';

// Bytes: B/KB/MB/GB/TB (base 1024); ru: Б/КБ/МБ/ГБ/ТБ
tooltip: {
  valueFormat: {type: 'number', units: FORMAT_UNITS_BYTES, precision: 1},
}

// Bits: bit/Kbit/Mbit/Gbit/Tbit (base 1000); ru: бит/Кбит/Мбит/Гбит/Тбит
// Typical for network throughput values.
tooltip: {
  valueFormat: {type: 'number', units: FORMAT_UNITS_BITS, precision: 1},
}

// Short numbers: K/M/B/T (base 1000), language-agnostic Latin postfixes.
// 300 → "300", 1500 → "1.5 K", 1_500_000 → "1.5 M"
tooltip: {
  valueFormat: {type: 'number', units: FORMAT_UNITS_NUMBERS, precision: 1},
}
```

--------------------------------

### Format Time with Custom Units

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Configure a non-linear time scale using an array of {factor, postfix} objects for seconds, minutes, hours, and days. Use 'delimiter: ""' to concatenate values and postfixes.

```javascript
tooltip: {
  valueFormat: {
    type: 'number',
    precision: 1,
    units: {
      scale: [
        {factor: 1, postfix: 's'},
        {factor: 60, postfix: 'min'},
        {factor: 3600, postfix: 'h'},
        {factor: 86400, postfix: 'd'},
      ],
      delimiter: '',
    },
  },
}
```

--------------------------------

### Lock to a Single Unit with Localized Postfix

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Combine unit locking with localized postfixes by providing a dictionary to the 'postfix' option. Specify the language using the 'lang' option.

```javascript
// Sugar + localized postfix. Same scale, different language.
tooltip: {
  valueFormat: {
    type: 'number',
    precision: 1,
    units: {factor: 1000, postfix: {en: 'K', ru: 'К'}},
    lang: 'ru',
  },
}
// 1500 → "1,5 К"
```

--------------------------------

### Show Data Labels for Series, Hide One Bar

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/data-labels.md

Enable data labels for a bar series and then selectively hide the label for a specific bar using per-point configuration.

```javascript
series: {
  data: [
    {
      type: 'bar-x',
      dataLabels: {enabled: true},
      data: [
        {x: 0, y: 120},
        // This bar's label is hidden
        {x: 1, y: 90, dataLabels: {enabled: false}},
        {x: 2, y: 150},
      ],
    },
  ];
}
```

--------------------------------

### Localized Unit Postfixes

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Configure localized postfixes for units like Bytes, KB, MB. The system falls back to 'en' or an empty string if a language-specific postfix is not found. The 'lang' option on `FormatNumberOptions` determines the language used.

```javascript
tooltip: {
  valueFormat: {
    type: 'number',
    precision: 1,
    units: {
      scale: {
        base: 1024,
        postfixes: [
          {en: 'B', ru: 'Б'},
          {en: 'KB', ru: 'КБ'},
          {en: 'MB', ru: 'МБ'},
        ],
      },
    },
    lang: 'ru',
  },
}
// 1024 → "1 КБ"
```

--------------------------------

### Format Byte Counts with Units

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Utilize the 'units' option with a geometric scale for byte counts (B, KB, MB, GB, TB). Set 'precision' for decimal places and 'base' to 1024 for binary scaling.

```javascript
tooltip: {
  valueFormat: {
    type: 'number',
    precision: 1,
    units: {
      scale: {base: 1024, postfixes: ['B', 'KB', 'MB', 'GB', 'TB']},
    },
  },
}
```

--------------------------------

### Enable Tooltip Totals

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/tooltip.md

Enable the display of aggregate totals in the tooltip. This is useful for showing sums across series for the hovered category.

```javascript
tooltip: {
  totals: {
    enabled: true,
  }
}
```

--------------------------------

### Lock to a Single Unit (Thousands)

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Force values into a specific unit, like thousands ('K'), by providing a single {factor, postfix} entry in 'units'. This replaces legacy unit options.

```javascript
// Plain sugar — lock to thousands with an English postfix.
tooltip: {
  valueFormat: {
    type: 'number',
    precision: 1,
    units: {factor: 1000, postfix: 'K'},
  },
}
// 300     → "0.3 K"
// 1500    → "1.5 K"
// 1500000 → "1,500 K"
```

--------------------------------

### Keep Series Labels Off, Enable Specific Points

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/data-labels.md

Configure a bar series with data labels disabled by default, then enable labels for only specific data points.

```javascript
series: {
  data: [
    {
      type: 'bar-x',
      // No `dataLabels` at series level
      data: [
        {x: 0, y: 120},
        // Only this bar gets a label
        {x: 1, y: 90, dataLabels: {enabled: true}},
        {x: 2, y: 150},
      ],
    },
  ];
}
```

--------------------------------

### Enable HTML in Chart Title

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

Set `title.html` to `true` to render the title as an HTML element. This allows for rich HTML content like links and styled badges instead of plain SVG text.

```javascript
title: {
  text: '<a href="https://example.com" style="color: blue;">My chart</a>',
  html: true,
}
```

--------------------------------

### Setting Axis Type in Charts

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/axis-types.md

Demonstrates how to specify the axis type for a chart's x-axis. The available types are 'linear', 'logarithmic', 'datetime', or 'category'.

```javascript
xAxis: {
    type: 'linear',
}
```

--------------------------------

### Custom Value Formatter

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Implement custom formatting logic for values when built-in options are insufficient. The `formatter` function receives an object with a `value` property and must return a string. This is useful for locale-aware currency, pluralization, or combining multiple data points.

```javascript
const BASELINE = 1000;

const currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
const percent = new Intl.NumberFormat('en-US', {
  style: 'percent',
  signDisplay: 'exceptZero',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1,
});

const formatRevenue = ({value}) => {
  const amount = Number(value);
  if (!Number.isFinite(amount)) return String(value);
  const delta = (amount - BASELINE) / BASELINE;
  return `${currency.format(amount)} (${percent.format(delta)})`;
};

{
  series: {
    data: [
      {
        type: 'line',
        name: 'Revenue',
        data: [/* y in USD */],
      },
    ],
  },
  tooltip: {
    valueFormat: {type: 'custom', formatter: formatRevenue},
  },
}
```

--------------------------------

### HTML in Tooltip Series Names

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

Tooltip series names support HTML directly without needing an `html` flag. HTML content in `series.data[].name` is interpreted, allowing for styled series labels in tooltips.

```javascript
series: {
  data: [{
    type: 'bar-x',
    name: '<b>Revenue</b>',
    data: [{x: 0, y: 1200}],
  }],
}
```

--------------------------------

### Date Formatting

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Format timestamps by setting `type: 'date'` and providing a Day.js format string. This is used for various chart elements like axis tick labels and tooltip headers.

```javascript
tooltip: {
  headerFormat: {type: 'date', format: 'DD MMMM YYYY'},
}
```

--------------------------------

### HTML Axis Labels for Category Axes

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

This configuration enables HTML rendering for category axis labels. It allows for rich text formatting within each category label, such as applying styles to text. Note that rotation options are disabled when `html: true`.

```javascript
xAxis: {
  type: 'category',
  categories: [
    '<span style="color:#4fc4b7"><b>Jan</b></span>',
    '<span style="color:#e8684a"><b>Feb</b></span>',
  ],
  labels: {
    html: true,
  },
}
```

--------------------------------

### HTML Overlay Rendering for Data Labels

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

When `html: true` is enabled, elements are rendered as an HTML overlay on top of the SVG. This allows for rich HTML formatting, inline CSS, and multi-line layouts. However, it does not participate in SVG clipping or export, and label rotation is not supported.

```javascript
series: {
  data: [{
    type: 'bar-x',
    dataLabels: {
      enabled: true,
      html: true,
    },
    data: [{
      x: 0,
      y: 800,
      label: '<span style="background:#4fc4b7;color:#fff;padding:4px;border-radius:4px;">Q1</span>',
    }],
  }],
}
```

--------------------------------

### Custom Date Time Axis Labels

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Override default Day.js format strings for date/time axis tick labels and tooltip dates using `xAxis.labels.dateTimeLabelFormats`. This allows customization for different time granularities like milliseconds, seconds, minutes, hours, days, weeks, months, quarters, half-years, and years.

```javascript
Available keys: `millisecond`, `second`, `minute`, `hour`, `day`, `week`, `month`, `quarter`, `halfYear`, `year`.

The `halfYear` granularity (6-month ticks) is **opt-in**: it only activates when you supply a `halfYear` format override. Without it the tick selection skips from quarterly to yearly.

**Example:** Quarterly x-axis labels and tooltip header both showing `Q1 2022`, `Q2 2022`, …
```

--------------------------------

### HTML Legend Items

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

Enabling `legend.html` allows for HTML content within legend items. This enables rich text formatting for series names displayed in the legend, such as applying bold fonts and custom colors.

```javascript
legend: {
  enabled: true,
  html: true,
}
```

```javascript
legend: {
  enabled: true,
  html: true,
},
series: {
  data: [
    {
      type: 'pie',
      data: [
        {
          name: '<span style="font-weight:bold;color:#4fc4b7">Revenue</span>',
          value: 1200,
        },
        {
          name: '<span style="font-weight:bold;color:#e8684a">Expenses</span>',
          value: 800,
        },
      ],
    },
  ],
}
```

--------------------------------

### Customize Tooltip Totals

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/tooltip.md

Customize the tooltip totals row by setting a custom label, defining a custom aggregation function (e.g., to find the maximum value), and specifying value formatting.

```javascript
tooltip: {
  totals: {
    enabled: true,
    label: 'Max value:',
    aggregation: ({hovered}) => Math.max(...hovered.map((item) => item.data.y)),
    valueFormat: {
      type: 'number',
      precision: 1,
    },
  }
}
```

--------------------------------

### Lock to a Single Unit with Custom Delimiter

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Use the full wrapper form for 'units' to specify a custom delimiter when locking to a single unit, such as an empty string to remove spacing.

```javascript
units: {scale: [{factor: 1000, postfix: 'K'}], delimiter: ''}
// 1500 → "1.5K"
```

--------------------------------

### Apply Theming to Chart Container

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/theming.md

Wrap your Chart component within a div and apply the CSS class that contains the custom property overrides. This ensures the styles are scoped to the specific chart instance.

```jsx
<div className="my-chart-container">
  <Chart data={data} />
</div>
```

--------------------------------

### Custom Date Format Token

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/value-formatting.md

Extend Day.js vocabulary with a custom 'B' token for half-year digits. This token can be used in date format strings for chart elements.

```javascript
- `B` — half-year digit (1 or 2). Example: `[H]B YYYY` → `H1 2024`.
```

--------------------------------

### Override Tooltip Value Format Per Series

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/tooltip.md

Overrides the default tooltip value format for a specific series using `series.tooltip.valueFormat`. This is useful when a chart displays data with different units, such as bytes and counts.

```javascript
{
  series: {
    data: [
      {
        type: 'line',
        name: 'Bandwidth',
        data: [/* y in bytes */],
        tooltip: {
          valueFormat: {
            type: 'number',
            precision: 1,
            units: {scale: {base: 1024, postfixes: ['B', 'KB', 'MB', 'GB', 'TB']}},
          },
        },
      },
      {
        type: 'line',
        name: 'Requests',
        data: [/* ... */],
        // falls back to tooltip.valueFormat below
      },
    ],
  },
  tooltip: {
    valueFormat: {type: 'number', precision: 0},
  },
}
```

--------------------------------

### SVG Rendering for Data Labels

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

By default, text elements are rendered within the SVG as text nodes. This method supports SVG clipping, automatic label rotation, text truncation, and SVG export. HTML tags are not interpreted in this mode.

```javascript
series: {
  data: [{
    type: 'bar-x',
    dataLabels: {
      enabled: true,
      // html is false by default
    },
    data: [{x: 0, y: 800, label: 'Q1'}],
  }],
}
```

--------------------------------

### Customize Pie Series Legend Labels

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/legend.md

Use 'legend.itemText' to provide custom labels for pie series data points in the legend. This property takes precedence over the 'name' property for legend display.

```javascript
series: {
  data: [
    {
      type: 'pie',
      data: [
        {
          name: 'Series 1',
          value: 10,
          legend: {
            itemText: 'Custom legend name',
          },
        },
      ],
    },
  ];
}
```

--------------------------------

### Disable Data Labels for a Pie Chart

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/data-labels.md

Use the `enabled` property within the `dataLabels` configuration to disable labels for an entire pie series.

```javascript
series: {
  data: [{
    type: 'pie',
    dataLabels: {
        enabled: false
    },
    data: [ ... ]
  }]
}
```

--------------------------------

### Disable Tooltip for Specific Series

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/tooltip.md

Use `tooltip.enabled: false` on individual series to hide them from the tooltip. This is useful when a series, like an average line, provides context but doesn't need direct tooltip interaction.

```javascript
series: {
  data: [
    // Series 1: Column series for actual sales (should show in tooltip)
    {
      name: 'Monthly Sales',
      type: 'bar-x',
      data: [ ... ],
    },
    // Series 2: Line series for average (should be hidden from tooltip)
    {
      name: 'Yearly Average',
      type: 'line',
      data: [ ... ],
      tooltip: {
        enabled: false
      }
    }
  ];
}
```

--------------------------------

### Hide Individual Points from Tooltip

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/tooltip.md

Hides a specific data point from appearing in the tooltip by setting `tooltip.enabled: false` on the data point. This setting takes precedence over series-level configurations.

```javascript
series: {
  data: [
    {
      name: 'Monthly Sales',
      type: 'bar-x',
      data: [
        {x: 0, y: 120},
        // This bar is excluded from the tooltip
        {x: 1, y: 90, tooltip: {enabled: false}},
        {x: 2, y: 150},
      ],
    },
  ];
}
```

--------------------------------

### Control Chart Title Height with HTML

Source: https://github.com/gravity-ui/charts/blob/main/docs/diplodoc/pages/guides/html.md

Use `maxHeight` to limit the vertical space occupied by the HTML title. This property accepts pixel values, pixel strings, or percentages of the chart height. Content exceeding this limit will be clipped.

```javascript
title: {
  text: '<b>My chart</b><br/><span style="font-size:12px">Subtitle line</span>',
  html: true,
  maxHeight: '20%', // or 80 / "80px"
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.