Features
This page contains structured information that will help you to start working with DHTMLX Chart and go into deep dive on its functionality.
How to start with DHTMLX Chart
In this section you can find out how to initialize different types of Charts, and how to integrate Chart into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Chart |
Types of Charts
| Topic | Description |
|---|---|
| Specifying the Chart type | Check the list of available Chart types and learn how to specify the necessary one |
| Spline area chart | Learn how to initialize Spline area chart (Example) |
| Spline chart | Learn how to initialize Spline chart (Example) |
| Area chart | Learn how to initialize Area chart (Example) |
| Line chart | Learn how to initialize Line chart (Example) |
| Bar chart | Learn how to initialize Bar chart (Example) |
| X-Bar chart | Learn how to initialize X-Bar chart (Example) |
| Scatter chart | Learn how to initialize Scatter chart (Example) |
| Donut chart | Learn how to initialize Donut chart (Example) |
| Pie chart | Learn how to initialize Pie chart (Example) |
| Pie 3D chart | Learn how to initialize Pie 3D chart (Example) |
| Radar chart | Learn how to initialize Radar chart (Example) |
| Treemap chart | Learn how to initialize Treemap chart (Example 1, Example 2) |
| Calendar heatmap chart | Learn how to initialize Calendar heatmap chart |
| Grid and Chart | Learn how to bind Chart to Grid |
Loading data into Chart
In this section you can discover the ways of loading data into Chart.
| Topic | Description |
|---|---|
| Loading chart data | Learn how to load the initial data into Chart (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Chart with React (Demo) |
| Angular integration | Learn how to use DHTMLX Chart with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Chart with Vue.js (Demo) |
How to configure Chart
In this section you can discover how to configure a Chart legend, scales, and series.
| Topic | Description |
|---|---|
| Configuring a legend | Learn how to configure a legend for Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, Scatter charts (Example) |
| Configuring X,Y scales | Learn how to configure X,Y scales for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter charts (Example 1, Example 2, Example 3) |
| Configuring radial scales | Learn how to configure radial scales for Radar chart (Example) |
| Configuring series | Learn how to configure series for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter, Radar charts |
| Configuring a legend | Learn how to configure a legend for Pie, Pie3D, Donut charts (Example) |
| Configuring series | Learn how to configure series for Pie, Pie3D, Donut charts |
| Configuring a legend | Learn how to configure a legend for Treemap chart (Example 1, Example 2) |
| Configuring series | Learn how to configure series for Treemap chart |
| Configuring a mixed chart | Learn how to configure Line, Spline and Area charts together |
| Changing configuration on the fly | Learn how to set configuration of a chart dynamically |
| Displaying average values | Learn how to display a huge data set in the chart (Example) |
How to customize Chart
In this section you can learn how to customize Chart.
| Topic | Description |
|---|---|
| Bar chart. Gradient | Learn how to define a color gradient for bars |
| Bar chart. Stacked chart | Learn how to show a stacked Bar chart |
| Bar chart. Base line | Learn how to set a base line for rendering items in Bar chart |
| Bar chart. Show text | Learn how to show and customize text values of data items in Bar chart |
| Legend position | Learn how to customize legend position |
| Series. Point types | Learn how to customize the type of the points of data items in a series |
| Series. Tooltip template | Learn how to customize tooltips for series |
| Scales. Text template for scale labels | Learn how to customize the text of scale labels |
| Scales. Dashed grid | Learn how to make the grid lines dashed for Chart with scales |
| Scales. Without grid (lines) | Learn how to show/hide the grid lines (for x,y, or both scales |
| Scales. Custom paddings (indents) | Learn how to set the padding between the scale and the chart container |
| Styling (custom CSS) | Learn how to change the look and feel of Chart (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with data in Chart
In this section you can discover how to apply the DataCollection API to work with data of Chart.
| Topic | Description |
|---|---|
| Serializing chart data | Learn how to serialize the chart data (Example) |
| Adding new data into Chart | Learn how to add data on the fly (Example) |
| DataCollection API | Check the list of all available DataCollection API |
How to work with Chart series
In this section you will find out how to work with Chart series.
| Topic | Description |
|---|---|
| Iterating over series | Learn how to perform iteration over chart series (Example) |
| Getting series configuration | Learn how to get an object with the configuration of a certain series (Example) |
How to export Chart
In this section you will know how to export Chart to different formats.
| Topic | Description |
|---|---|
| Exporting Chart to a PDF or PNG file | Learn how to export Chart to PDF or PNG formats (Example) |
How to work with Chart events
This section explains how to work with Chart events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Chart events (Example) |
API reference
In this section you can find out corresponding references of Chart API.
| Topic | Description |
|---|---|
| Chart methods | Learn how to use Chart methods |
| Chart events | Learn how to use Chart events |
| Chart properties | Learn how to use Chart properties |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with Chart.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
info
Do you need more functionality? Feel free to share your suggestions in the comments below!