# 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>
      )}
    />
  )
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/charts/e-charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.