# 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 provides the option to insert a Data Chart in your worksheets or report sheets.
To add a Data Chart, follow the steps below:

1. Go to the **INSERT** tab and click the **Data Charts** button in the ribbon UI.
<br>
    ![1](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/1.db9e29.png?width=800)
<br>
2. Select the desired chart type from the dropdown.
    Once selected, the **Data Chart** will be added to your sheet and the **Data Chart Panel** will open on the right.
    ![2](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.635f5d.png?width=800)
    ![3](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.58cf58.png?width=800)
<br>
3. Modify the Data Chart's configuration information using the **Data Chart Panel**.
    It has two main sections:
    1. **[Inspector](/spreadjs/docs/v18/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/v18/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.