# Chart Learn about chart configuration in ActiveReportsJS. ## Content ## Introduction A `chart` is a graphical report item that enables report authors to visualize data trends over time, compare groups or categories, analyze parts of a whole, and identify relationships between variables. In ActiveReportsJS, you can use the following chart types to design such data visualizations: - **Column Charts** - Column - Stacked Column - Stacked Percentage Column - Range Column - **Bar Charts** - Bar - Stacked Bar - Stacked Percentage Bar - Range Bar - **Line Charts** - Line - Smooth Line - Stepped Line - **Area Charts** - Area - Stacked Area - Stacked Percentage Area - **Circular Charts** - Pie - Doughnut - Circular Bar - **Special Charts** - Spiral - Stacked Spiral - Stacked Percentage Spiral - Polar - Stacked Polar - Stacked Percentage Polar - Scatter - Bubble - **Financial Charts** - Candlestick - High Low Close - High Low Open Close - **Gauge Charts** - Gauge Charts in ActiveReportsJS are highly customizable and consist of multiple components, such as header, legend, axes, and plot area. These components define the chart’s structure and enhance data presentation. The diagram below illustrates the anatomy of a typical chart: ![Figure 1: Anatomy of a Chart in ActiveReportsJS—highlighting key components such as headers, plot areas, legends, axes, and footers](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/chart-anatomy.png) ## Adding a Chart Adding a chart to your report in ActiveReportsJS is simple and intuitive. You can insert a `Chart` by either double-clicking the corresponding item in the [toolbox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#toolbox) or by dragging and dropping it directly onto the report design surface. If [data binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) has already been configured for the report, the `Chart Wizard` will automatically launch. This wizard streamlines the setup process, allowing you to quickly configure your chart. On the first page of the Chart Wizard, you can: * Select the dataset you want to visualize. * Choose the appropriate plot type to represent your data effectively. ![Figure 2: Chart Wizard in ActiveReportsJS—showing dataset selection and plot type options.](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.c1b83e.png) ## Configuring the Chart Plot On the second page of the Chart Wizard, you can configure the chart plot based on the selected plot type. This step allows you to customize the appearance and behavior of the chart for optimal data visualization. Refer to the following pages for detailed configuration instructions for each chart type: * [Column and Bar ](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#chart-wizard) * [Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart#chart-wizard) * [Area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/area#chart-wizard) * [Spiral](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/spiral#chart-wizard) * [Polar](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/polar#chart-wizard) * [Pie and Doughnut](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/pie#chart-wizard) * [Radar Area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/radar-area#chart-wizard) * [Radard Bubble and Scatter](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/radar-scatter-bubble#chart-wizard) * [Radar Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/radar-line#chart-wizard) * [Bubble and Scatter](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/scatter-bubble#chart-wizard) * [Candlestick, High-Low-Close and High-Low-Open-Close](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/financial#chart-wizard) * [Range Area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/area#chart-wizard) * [Range Bar and Column](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#chart-wizard) * [Gauge](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/gauge#chart-wizard) ## Preview and Final Adjustments On the final page of the Chart Wizard, you can: * Select a color palette for the chart. * Preview the chart output to ensure it meets your requirements. * Finalize the configuration by clicking Finish. Alternatively, you can make further adjustments by selecting specific chart components in the Advanced Customization section, such as: * [Plot Area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area) * [Axes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes) * [Legend](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend) Selecting any of these components opens their configuration options in the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). ![Figure 3: Preview and advanced customization options](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.c9a696.png) ## Chart Designer The `Chart Designer` in ActiveReportsJS allows you to modify and fine-tune chart properties. You can use the [report explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer) to configure various chart components, such as [plot](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot), [axes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes), and [legend](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend). ![Report Explorer displaying the chart structure](https://cdn.mescius.io/document-site-files/images/4206d62a-1d03-42d0-9ace-80a695bb8c17/image.d856e0.png) Selecting a component in the report explorer loads its configuration options in the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). ## General Chart Configuration When you select the root node of a chart, such as `Chart1`, the properties panel displays the general chart configuration. This includes: * [Base Report Item properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#base-properties) * [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-properties) * [Data Region properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions#common-properties) Additionally, it provides the following specific properties: * **`Plots`:** A [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) of [chart plots](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot). * **`Palette`:** Pre-defined or custom color collections used to style plots. * **`Custom Palette Colors`:** A user-defined colors collection for the Custom Palette. ## Header and Footer `Header` and `Footer` elements let you add text above and below the chart's plot area. These elements can be customized with: * [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-properties) * A subset of [Text Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) Specific properties include: * **`Caption`:** A [String Expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) to define the text displayed in the header or footer. * **`Height`:** A [Number](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) representing the height as a percentage of the chart's total height. ## Plot Area The plot area displays the charted data and contains the [axes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes) and [legend](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend). Configuration options for the plot area include: * [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-properties) * A [collection](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#collection) of axes. ## Plot, Axes, and Legend For more detailed configurations, refer to the following sections: * [Plot](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot) * [Axes](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes) * [Legend](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)