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 https://github.com/Jannchie/anichart-remotion-template
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();
  stage.addChild(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