Charts

Add visually stunning charts using our charts framework.

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

yarn

yarn add @rowsncolumns/charts

npm

npm install @rowsncolumns/charts

Adding chart component and editor

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

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