Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize Chart

Types of Charts

TopicDescription
Specifying the Chart typeCheck the list of available Chart types and learn how to specify the necessary one
Spline area chartLearn how to initialize Spline area chart (Example)
Spline chartLearn how to initialize Spline chart (Example)
Area chartLearn how to initialize Area chart (Example)
Line chartLearn how to initialize Line chart (Example)
Bar chartLearn how to initialize Bar chart (Example)
X-Bar chartLearn how to initialize X-Bar chart (Example)
Scatter chartLearn how to initialize Scatter chart (Example)
Donut chartLearn how to initialize Donut chart (Example)
Pie chartLearn how to initialize Pie chart (Example)
Pie 3D chartLearn how to initialize Pie 3D chart (Example)
Radar chartLearn how to initialize Radar chart (Example)
Treemap chartLearn how to initialize Treemap chart (Example 1, Example 2)
Calendar heatmap chartLearn how to initialize Calendar heatmap chart
Grid and ChartLearn how to bind Chart to Grid

Loading data into Chart

In this section you can discover the ways of loading data into Chart.

TopicDescription
Loading chart dataLearn how to load the initial data into Chart (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Chart with React (Demo)
Angular integrationLearn how to use DHTMLX Chart with Angular (Demo)
Vue integrationLearn 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.

TopicDescription
Configuring a legendLearn how to configure a legend for Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, Scatter charts (Example)
Configuring X,Y scalesLearn how to configure X,Y scales for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter charts (Example 1, Example 2, Example 3)
Configuring radial scalesLearn how to configure radial scales for Radar chart (Example)
Configuring seriesLearn how to configure series for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter, Radar charts
Configuring a legendLearn how to configure a legend for Pie, Pie3D, Donut charts (Example)
Configuring seriesLearn how to configure series for Pie, Pie3D, Donut charts
Configuring a legendLearn how to configure a legend for Treemap chart (Example 1, Example 2)
Configuring seriesLearn how to configure series for Treemap chart
Configuring a mixed chartLearn how to configure Line, Spline and Area charts together
Changing configuration on the flyLearn how to set configuration of a chart dynamically
Displaying average valuesLearn 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.

TopicDescription
Bar chart. GradientLearn how to define a color gradient for bars
Bar chart. Stacked chartLearn how to show a stacked Bar chart
Bar chart. Base lineLearn how to set a base line for rendering items in Bar chart
Bar chart. Show textLearn how to show and customize text values of data items in Bar chart
Legend positionLearn how to customize legend position
Series. Point typesLearn how to customize the type of the points of data items in a series
Series. Tooltip templateLearn how to customize tooltips for series
Scales. Text template for scale labelsLearn how to customize the text of scale labels
Scales. Dashed gridLearn 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 classesA 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.

TopicDescription
Serializing chart dataLearn how to serialize the chart data (Example)
Adding new data into ChartLearn how to add data on the fly (Example)
DataCollection APICheck 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.

TopicDescription
Iterating over seriesLearn how to perform iteration over chart series (Example)
Getting series configurationLearn 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.

TopicDescription
Exporting Chart to a PDF or PNG fileLearn 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.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Chart events (Example)

API reference

In this section you can find out corresponding references of Chart API.

TopicDescription
Chart methodsLearn how to use Chart methods
Chart eventsLearn how to use Chart events
Chart propertiesLearn 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.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn 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!