Skip to content

Render the Chart

I created a template for render the chart by Remotion.

Step 1. Clone the repository

First we need to clone this repository.

git clone
cd anichart-remotion-template

Or, since this repository is defined as a github template, you can click Use this template button on the github page to create a repository of your own.

Step 2. Install the dependencies

We need to install the dependencies. The package manager I'm using here is pnpm, but you can use other package managers as well.

pnpm i

Step 3. Run the development server

We can start a development server for preview with the following command. By default, the server will run on port 3000.

pnpm start

Step 4. Implement the definition of charts

We define the chart in the file src/DemoChart.tsx.

In @anichart/remotion, there is a React function component for Remotion called "Anichart".

import { Anichart } from '@anichart/remotion';

This component requires passing in a callback function called initStage, whose only parameter is anichart.Stage.

<Anichart initStage={initStage} />;

In this callback function, we need to define the chart and mount it to this stage.

function initStage(stage: ANI.Stage) {
  ANI.recourse.loadCSV('path/to/data', 'data');
  const barChart = new ANI.BarChart();

At this point, we can view the visualization in the development server's page.

Step 5. Render the video

After confirming that the visualization is correct, it can be rendered into a video with the following command.

pnpm build

Released under the MIT License.