# Data Chart Designer

This topic provides the steps to insert a data chart in your worksheets or report sheets using SpreadJS Designer Component.

## Content

SpreadJS Designer Component lets you insert a Data Chart and configure it through the **Data Chart Panel**.
To add a Data Chart, follow these steps:

1. Go to the **INSERT** tab and click the **Data Charts** button in the ribbon UI.
    ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.c4b002.png?width=800)
2. Select the desired chart type from the dropdown.
    Once selected, the Data Chart is added to the current sheet and the **Data Chart Panel** opens on the right.
    ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.45bf5d.png?width=800)
    ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.defdd4.png?width=800)
3. Configure the chart by using the **Data Chart Panel**.
    The panel has two main sections:
    1. **[Inspector ](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-chart-designer/data-chart-styles)**\- This section allows you to customize the chart’s appearance and make it more readable and visually appealing\.
    2. **[Data Binding](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-chart-designer/data-binding-settings)** \- This section helps you bind your chart to data from the DataManager or specific cells in a ReportSheet\. The data displayed in the Data Chart is setup through this part\.