# ChartPlugin

[![npm version](https://img.shields.io/npm/v/@univerjs-pro/sheets-chart-ui)](https://npmjs.org/packages/@univerjs-pro/sheets-chart-ui)
[![license](https://img.shields.io/npm/l/@univerjs-pro/sheets-chart-ui)](https://img.shields.io/npm/l/@univerjs-pro/sheets-chart-ui)
![CSS Included](https://img.shields.io/badge/CSS_Included-blue?logo=CSS3)
![i18n](https://img.shields.io/badge/zh--CN%20%7C%20en--US-cornflowerblue?label=i18n)


### Installation

Chart Feature provide the ability to insert floating charts based on range data in spreadsheets.

This feature includes the following plugin packages:

- `@univerjs-pro/sheets-chart` - Chart plugin
- `@univerjs-pro/sheets-chart-ui` - Chart UI plugin

```shell npm2yarn
npm install @univerjs-pro/sheets-chart @univerjs-pro/sheets-chart-ui
```


## Usage

```typescript
import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/themes";
import { UniverSheetsChartPlugin } from '@univerjs-pro/sheets-chart';
import { UniverSheetsChartUIPlugin } from '@univerjs-pro/sheets-chart-ui';
import SheetsChartZhCN from '@univerjs-pro/sheets-chart/locale/zh-CN';
import SheetsChartUIZhCN from '@univerjs-pro/sheets-chart-ui/locale/zh-CN';

import '@univerjs-pro/sheets-chart-ui/lib/index.css';

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      SheetsChartZhCN,
      SheetsChartUIZhCN
    ),
  },
});

univer.registerPlugin(UniverSheetsChartPlugin);
univer.registerPlugin(UniverSheetsChartUIPlugin);
```