Charts

Add charts using your preferred chart framework

You can add your own chart frameworks like recharts, d3 or echarts using the getChartComponent callback

import { Suspense, lazy } from "react"
import { CircularLoader, Separator } from "@rowsncolumns/ui";
const ChartComponent = lazy(() => import('my_chart_component'))

const MySpreadsheet = () => {
  return (
    <CanvasGrid
      charts={[
        {
          chartId: 1,
          position: {
            sheetId: 1,
            overlayPosition: {
              anchorCell: {
                rowIndex: 8,
                columnIndex: 11,
              },
              heightPixels: 200,
              widthPixels: 300,
              offsetXPixels: 10,
              offsetYPixels: 10,
            },
          },
          spec: {
            title: "My chart",
            basicChart: {
              chartType: "BAR",
              series: [
                {
                  series: {
                    sourceRange: {
                      sources: [
                        {
                          startRowIndex: 1,
                          endRowIndex: 10,
                          startColumnIndex: 2,
                          endColumnIndex: 10,
                        },
                      ],
                    },
                  },
                },
              ],
              domains: [
                {
                  domain: {
                    sourceRange: {
                      sources: [
                        {
                          startRowIndex: 1,
                          endRowIndex: 10,
                          startColumnIndex: 2,
                          endColumnIndex: 10,
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
      ]}
      
      getChartComponent={(props: ChartComponentProps) => (
        <Suspense fallback={<CircularLoader />}>
          <ChartComponent
            {...props}
            sheetData={sheetData}
          />
        </Suspense>
      )}
    />
  )
}

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);

Currently, there is no UI to add/edit charts

Apache ECharts support

Currently development is ongoing to support Apache ECharts https://echarts.apache.org/