This article provides a step-by-step guide to run the Syncfusion Chart code component in local (TestHarness).

Before getting started with the Syncfusion Chart code component, ensure the following prerequisites are satisfied:

• node.js (>= v18.20.4) (LTS version is recommended)
• System requirements for Syncfusion React components

To run the Syncfusion Chart code component, follow these steps:

1. Ensure that all the prerequisites are met.

2. Open a command prompt (cmd) and navigate to the Chart code component, which is located in the components/charts/ folder.

3. Utilize the following command to install the dependent packages:

   npm install

4. Execute the sample with the following command to visualize the Chart code component:

   npm start watch

   

5. Now, within the Data Inputs section of the property pane, designate the data source for the Chart code component using the ChartData.csv.

   [!NOTE] After loading the data source, proceed to select the required column types of DataSource section in the property pane. For example, assign the Whole.None column type for the VietnamX column of DataSource property.

   

6. After loading the CSV file, click the Apply button to load the data source in the Chart code component.

7. Once the data is loaded, include the necessary series data for the Chart code component by accessing the series property and paste the Series config data.

   

8. Customize the Chart code component properties in the right property pane.

• Getting Started with the Syncfusion PowerApps Chart Code Component in Canvas Application

• Getting Started with the Syncfusion PowerApps Chart Code Component in Model-Driven Application (Form)

• Getting Started with the Syncfusion PowerApps Chart Code Component in Model-Driven Application (Custom Pages)

• Getting Started with the Syncfusion PowerApps Chart Code Component in PowerPages