> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/charts/e-charts.md).

# Charts

ECharts is the built-in framework for rendering charts, but we are agnostic of chart renderer, so you are free to use your own chart framework

Support for chart is in beta stage. Support is limited to `line, bar, pie, treemap, sunburst` charts. Feel free to submit a PR or feature request if you need support for more chart types.

### Installation

{% tabs %}
{% tab title="yarn" %}

```sh
yarn add @rowsncolumns/charts
```

{% endtab %}

{% tab title="npm" %}

```sh
npm install @rowsncolumns/charts
```

{% endtab %}
{% endtabs %}

### Adding chart component and editor

```tsx
import { ButtonInsertChart, CanvasGrid } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state"
import { useChart, ChartComponent, ChartEditorDialog, ChartEditor } from "@rowsncolumns/chart"

const App = () => {

  // useSpreadsheetState
  const {
    activeSheetId,
    activeCell,
    selections,
    rowCount,
    columnCount,
    getSheetId,
    getSheetName,
    getSeriesValuesFromRange,
    getDomainValuesFromRange,
    onRequestCalculate
  } = useSpreadsheetState({})

  // Charts module
  const {
    onRequestEditChart,
    onDeleteChart,
    onMoveChart,
    onResizeChart,
    onUpdateChart,
    onCreateChart,
    selectedChart,
  } = useCharts({
    createHistory,
    onChangeCharts,
  });


  return (
    <>
      <ButtonInsertChart onClick={() => onCreateChart(activeSheetId, activeCell, selections)} />
      <CanvasGrid
        getChartComponent={(props) => (
          <ChartComponent
            {...props}
            isDarkMode={isDarkMode}
            getSeriesValuesFromRange={getSeriesValuesFromRange}
            getDomainValuesFromRange={getDomainValuesFromRange}
            onRequestEdit={onRequestEditChart}
            onRequestCalculate={onRequestCalculate}
          />
        )}
      >

      <ChartEditorDialog>
        <ChartEditor
          sheetId={activeSheetId}
          chart={selectedChart}
          onSubmit={onUpdateChart}
          rowCount={rowCount}
          columnCount={columnCount}
        />
      </ChartEditorDialog>
    </>
  )
}
```

### Lazy loading charts

NextJS has trouble loading echarts which is published as CJS package. So we have to dynamically load ChartComponent

```tsx
import { lazy } from "react"

const ChartComponent = lazy(() => import("@rowsncolumns/charts/basic-chart"));

// Add suspense bounds
const App = () => {
  return (
    <CanvasGrid
      getChartComponent={(props) => (
        <Suspense fallback={<CircularLoader />}>
          <ChartComponent
            {...props}
            isDarkMode={isDarkMode}
            getSeriesValuesFromRange={getSeriesValuesFromRange}
            getDomainValuesFromRange={getDomainValuesFromRange}
            onRequestEdit={onRequestEditChart}
            onRequestCalculate={onRequestCalculate}
          />
        </Suspense>
      )}
    />
  )
)
```