Skip to content

[update] grammar and style in Chart user guides #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serhiipylypchuk1991 wants to merge 9 commits into
base: next
Choose a base branch
from
Open

[update] grammar and style in Chart user guides #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6e32d5b
[update] grammar and style in Chart types overview
serhiipylypchuk1991 Sep 7, 2026
c57c18b
[update] grammar and style in Chart configuration guide
serhiipylypchuk1991 Sep 7, 2026
f65fbb7
[update] grammar and style in Chart customization
serhiipylypchuk1991 Sep 7, 2026
f68dd89
[update] grammar and style in Chart data loading
serhiipylypchuk1991 Sep 7, 2026
044272f
[update] grammar and style in Chart event handling
serhiipylypchuk1991 Sep 7, 2026
e771c61
[update] grammar and style in Chart features page
serhiipylypchuk1991 Sep 7, 2026
0af3103
[update] grammar and style in Chart overview
serhiipylypchuk1991 Sep 7, 2026
fa235d8
[update] grammar and style in Chart initialization
serhiipylypchuk1991 Sep 7, 2026
2105070
[update] grammar and style in Work with Chart
serhiipylypchuk1991 Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 31 additions & 35 deletions docs/chart/charts_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,30 @@ description: You can have an overview of various Chart types in the documentatio

# Overview of Chart types

DHTMLX Chart provides a variety of charts types that will help you to represent you data in the most suitable way. Each type of chart is easily configurable and can be adjusted according to your preferences.
All in all there are 11 types of chart, in the list below they are combined into groups for the sake of convenience:

- Overview of Chart types
- [Line and Spline chart](#line-and-spline-chart)
- [Line chart](#line-chart)
- [Spline chart](#spline-chart)
- [Bar and X-Bar chart](#bar-and-x-bar-chart)
- [Bar chart](#bar-chart)
- [X-Bar chart](#x-bar-chart)
- [Area and SplineArea chart](#area-and-splinearea-chart)
- [Area chart](#area-chart)
- [SplineArea chart](#splinearea-chart)
- [Pie, Pie 3D and Donut chart](#pie-pie-3d-and-donut-chart)
- [Pie and Pie 3D chart](#pie-and-pie-3d-chart)
- [Donut chart](#donut-chart)
- [Radar chart](#radar-chart)
- [Scatter chart](#scatter-chart)
- [Treemap chart](#treemap-chart)
- [Calendar heatmap chart](#calendar-heatmap-chart)
DHTMLX Chart includes 13 chart types, so you can display your data in the best way. Every type is fully configurable.

The list below groups the types by kind:

- [Line and Spline chart](#line-and-spline-chart)
- [Line chart](#line-chart)
- [Spline chart](#spline-chart)
- [Bar and X-Bar chart](#bar-and-x-bar-chart)
- [Bar chart](#bar-chart)
- [X-Bar chart](#x-bar-chart)
- [Area and SplineArea chart](#area-and-splinearea-chart)
- [Area chart](#area-chart)
- [SplineArea chart](#splinearea-chart)
- [Pie, Pie 3D and Donut chart](#pie-pie-3d-and-donut-chart)
- [Pie and Pie 3D chart](#pie-and-pie-3d-chart)
- [Donut chart](#donut-chart)
- [Radar chart](#radar-chart)
- [Scatter chart](#scatter-chart)
- [Treemap chart](#treemap-chart)
- [Calendar heatmap chart](#calendar-heatmap-chart)

## Line and Spline chart

This is a basic chart type that shows changes of trends in progress over a period of time. Thus it will help you to display the dynamics of prices over a year or
how the number of staff has increased over several years. Choose this variant when your data has **more than 10 items**.
A basic chart type that shows how trends change over time. Use it to display price dynamics over a year or staff growth over several years. Choose this type when your data has **more than 10 items**.

### Line chart

Expand All @@ -50,7 +49,7 @@ how the number of staff has increased over several years. Choose this variant wh

## Bar and X-Bar chart

The same as Line chart it displays data for certain periods. It greatly suits you if there are **less than 10 items** in your data set.
Like the Line chart, the Bar chart displays data for a set of periods. It works best when your data set has **fewer than 10 items**.

### Bar chart

Expand All @@ -70,7 +69,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo

## Area and SplineArea chart

Area chart is based on the Line chart. The difference is that areas below lines are filled with color. This type of chart allows you to provide visual comparison of two or more values over time.
The Area chart builds on the Line chart, but fills the areas below the lines with color. Use it to compare two or more values over time.

### Area chart

Expand All @@ -90,7 +89,7 @@ Area chart is based on the Line chart. The difference is that areas below lines

## Pie, Pie 3D and Donut chart

Pie chart and its variations are the best choice when you deal with proportions and percentages. It is a circular chart divided into proportional parts that illustrate relations between items in a data set.
The Pie chart and its variations are the best choice for proportions and percentages. Each chart splits a circle into parts that show how items in a data set relate to each other.

### Pie and Pie 3D chart

Expand All @@ -112,8 +111,7 @@ Pie chart and its variations are the best choice when you deal with proportions

## Radar chart

This one is a two-dimensional chart that allows placing one or several series of values over multiple numerical variables. For example, Radar chart will help you to study how a number of parameters
relate to one item (the center point of a chart) and compare their values.
A two-dimensional chart that places one or more series of values over multiple numerical variables. Use the Radar chart to study how several parameters relate to one item (the center point of the chart) and to compare parameter values.

![Radar chart plotting two data series across multiple axes in DHTMLX Suite](/img/chart/radar_overview.png)

Expand All @@ -123,7 +121,7 @@ relate to one item (the center point of a chart) and compare their values.

## Scatter chart

The peculiarity of Scatter Chart is that it allows exploring relations between two sets of data in order to find out possible dependencies or patterns.
The Scatter chart explores relations between two sets of data to reveal dependencies or patterns.

![Scatter chart plotting two value series as points on XY axes in DHTMLX Suite](/img/chart/scatter_overview.png)

Expand All @@ -133,7 +131,7 @@ The peculiarity of Scatter Chart is that it allows exploring relations between t

## Treemap chart

A treemap chart presents a hierarchical visualization of data as a set of rectangular tiles and makes it easy to spot patterns. Several tiles can be collected into a group. The sizes of tiles are proportional to the values of the data items they represent.
The Treemap chart displays hierarchical data as a set of rectangular tiles, which makes patterns easy to spot. You can collect several tiles into a group. The size of each tile is proportional to the value of its data item.

![Treemap chart sizing planets by value with a color legend in DHTMLX Suite](/img/chart/treemap.png)

Expand All @@ -143,15 +141,15 @@ A treemap chart presents a hierarchical visualization of data as a set of rectan

**Related article:** [Treemap chart configuration](chart/configuration_properties.md#treemap-chart)

## Calendar heatmap chart
## Calendar heatmap chart

:::tip PRO VERSION ONLY
The calendar heatmap chart is available only in the PRO version of the DHTMLX Chart (or DHTMLX Suite).
The Calendar heatmap chart is available only in the PRO version of DHTMLX Chart (or DHTMLX Suite).
:::

The calendar heatmap chart is a two dimensional calendar view that uses graduated colors to visualize certain number of events for specific days during a year or other specified period of time. The whole time period in the chart is divided into years and years into months. Each cell in a column corresponds to a day of the week.
This chart is a two-dimensional calendar view. It uses graduated colors to show how many events fall on each day of a year or another period. The chart divides the period into years, and each year into months. Each cell in a column corresponds to a day of the week.

The chart helps to display and identify daily patterns or anomalies over the necessary period.
The chart helps you identify daily patterns and anomalies over the chosen period.

![Calendar heatmap chart showing daily profit values by color over a year in DHTMLX Suite](/img/chart/heatmap_overview.png)

Expand All @@ -162,6 +160,4 @@ The chart helps to display and identify daily patterns or anomalies over the nec
- [Event Calendar. Integration with Suite Calendar heatmap chart](https://snippet.dhtmlx.com/0n3ta0je)
- [Scheduler. Integration with Suite Calendar heatmap chart](https://snippet.dhtmlx.com/tlfazogt)


**Related article:** [Calendar heatmap chart configuration](chart/configuration_properties.md#calendar-heatmap-chart)

66 changes: 32 additions & 34 deletions docs/chart/configuration_properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,23 @@ description: You can explore the configuration of Chart in the documentation of

# Configuration

This chapter will guide you through the set of Chart configuration options. It explores both common DHTMLX Chart properties actual for all chart types and the config options individual for particular types.
This chapter describes the Chart configuration options. It covers both the properties that apply to all chart types and the options specific to particular types.

You need to set necessary properties from those listed below within the configuration object passed to the chart constructor function and thus adjust the chart settings to meet your needs.
Set the properties you need in the configuration object that you pass to the chart constructor.

## Main properties

DHTMLX Chart includes several configuration options that are mostly common for all chart types. They are:
DHTMLX Chart includes several configuration options that apply to most chart types:

- [type](#type)
- [scales](#scales)
- [series](#series)
- [legend](#legend)
- [maxPoints](#maxpoints)


### type

- [](chart/api/chart_type_config.md) - (*string*) defines the [type of a chart](chart/charts_overview.md) to initialize; "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area",
- [](chart/api/chart_type_config.md) - (`string`) defines the [type of a chart](chart/charts_overview.md) to initialize: "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area",
"splineArea", "donut", "pie", "pie3D", "radar", "treeMap", and "calendarHeatMap"

~~~js
Expand All @@ -34,7 +33,7 @@ const chart = new dhx.Chart("chart_container", {

### scales

- [](chart/api/chart_scales_config.md) - (*object*) defines configuration of chart scales
- [](chart/api/chart_scales_config.md) - (`object`) defines the configuration of chart scales

~~~js
const chart = new dhx.Chart("chart_container", {
Expand All @@ -43,10 +42,10 @@ const chart = new dhx.Chart("chart_container", {
~~~

:::info
It is necessary to configure [](chart/api/chart_scales_config.md) for the Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, or Scatter chart.
Configure [](chart/api/chart_scales_config.md) for the Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, or Scatter chart.
:::

There are "left","right","top","bottom" and "radial" (for Radar chart) types of [scales](chart/api/chart_scales_config.md).
[Scales](chart/api/chart_scales_config.md) support five types: "left", "right", "top", "bottom", and "radial" (for the Radar chart).

~~~js
const chart = new dhx.Chart("chart_container", {
Expand All @@ -72,11 +71,11 @@ const chart = new dhx.Chart("chart_container", {

**Related sample**: [Chart. Scale title](https://snippet.dhtmlx.com/5ir00fer)

Scales have both common and specific options. Check the full list of the available options for scales in the [API reference](chart/api/chart_scales_config.md).
Scales support both common and type-specific options. See the full list of scale options in the [API reference](chart/api/chart_scales_config.md).

### series

- [](chart/api/chart_series_config.md) - (*array*) defines configuration of chart series
- [](chart/api/chart_series_config.md) - (`array`) defines the configuration of chart series

~~~js
const chart = new dhx.Chart("chart_container", {
Expand All @@ -85,10 +84,10 @@ const chart = new dhx.Chart("chart_container", {
~~~

:::info
The [](chart/api/chart_series_config.md) configuration option is required for all types of charts.
The [](chart/api/chart_series_config.md) configuration option is required for all chart types.
:::

[Series](chart/api/chart_series_config.md) present an array of objects each of which contains a number of properties for rendering a separate [data set](chart/data_loading.md#preparing-data-set) on a chart.
[Series](chart/api/chart_series_config.md) is an array of objects. Each object defines how one [data set](chart/data_loading.md#preparing-data-set) appears on the chart.

~~~js
const chart = new dhx.Chart("chart_container", {
Expand Down Expand Up @@ -120,11 +119,11 @@ const chart = new dhx.Chart("chart_container", {

**Related sample**: [Chart. Point types](https://snippet.dhtmlx.com/cbj54wwu)

See the full list of configuration options for chart series in the [API reference](chart/api/chart_series_config.md).
See all chart series options in the [API reference](chart/api/chart_series_config.md).

### legend

- [](chart/api/chart_legend_config.md) - (*object*) defines the configuration of a chart legend
- [](chart/api/chart_legend_config.md) - (`object`) defines the configuration of a chart legend

~~~js
const chart = new dhx.Chart("chart_container", {
Expand All @@ -133,10 +132,10 @@ const chart = new dhx.Chart("chart_container", {
~~~

:::info
The [](chart/api/chart_legend_config.md) configuration option is required for Treemap charts and is optional for other types of charts.
The [](chart/api/chart_legend_config.md) configuration option is required for Treemap charts and optional for other chart types.
:::

The [](chart/api/chart_legend_config.md) object may contain a number of options that define its configuration.
The [](chart/api/chart_legend_config.md) object can contain several options.

~~~js
const chart = new dhx.Chart("chart_container", {
Expand All @@ -159,12 +158,11 @@ const chart = new dhx.Chart("chart_container", {
- [Chart. Enable legend](https://snippet.dhtmlx.com/00ei3q23)
- [Chart. Legend position](https://snippet.dhtmlx.com/pgqf1yxj)

You can view the full list of the configuration options of chart legends in the [API reference](chart/api/chart_legend_config.md).

See all chart legend options in the [API reference](chart/api/chart_legend_config.md).

### maxPoints

- [](chart/api/chart_maxpoints_config.md) - (*number*) displays an average number of values in case a data set is too large to show all the values in the chart
- [](chart/api/chart_maxpoints_config.md) - (`number`) sets the maximum number of data points; if the data set is larger, the chart displays averaged values

~~~js
const chart = new dhx.Chart("chart_container", {
Expand Down Expand Up @@ -602,7 +600,7 @@ The configuration object of [Calendar heatmap chart](chart/charts_overview.md#ca
- [series: []](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap)
- and, optionally, [legend: {}](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-without-scales-calendar-heatmap)

For example
For example:

~~~js
const heatMapData = [
Expand Down Expand Up @@ -651,17 +649,17 @@ chart.data.parse(heatMapData);

### Default range of dates

The default range of dates for which Calendar heatmap chart will be shown is **from** the 1st of January of the minimal year found in the dataset **to** the 31st of December of the maximal year found in the dataset.
The default period for the Calendar heatmap chart runs **from** January 1 of the earliest year in the data set **to** December 31 of the latest year.

### Custom range of dates

If you have a large data set and don't need the chart to be shown for the [whole period of time](#default-range-of-dates), you may change a range of dates to display the chart during the necessary period of time.
If your data set is large and you do not need the [whole period](#default-range-of-dates), you can narrow the range of dates that the chart displays.

For this, use the **startDate** and **endDate** properties of the [series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap) property.
Set the `startDate` and `endDate` properties in the [series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap) configuration.

#### 1. startDate & endDate

Let's take the following data set:
Consider the following data set:

~~~js
const heatMapData = [
Expand All @@ -677,7 +675,7 @@ const heatMapData = [
];
~~~

and consider how the chart will be shown depending on the values of the start and end dates.
The examples below show how the start and end dates affect the period that the chart covers.

- **One year**

Expand All @@ -698,7 +696,7 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "15/03/22" to "15/03/23" inclusively.
The chart then covers the period from "15/03/22" to "15/03/23" inclusive.

- **One month**

Expand All @@ -719,7 +717,7 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "01/03/22" to "31/03/22" inclusively.
The chart then covers the period from "01/03/22" to "31/03/22" inclusive.

- **Any other period**

Expand All @@ -740,11 +738,11 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "01/03/22" to "01/07/24" inclusively.
The chart then covers the period from "01/03/22" to "01/07/24" inclusive.

#### 2. startDate

If you specify the start date but don't specify the end date, the period for which the chart will displayed depends both on the data set and the start date.
If you specify the start date but not the end date, the period that the chart covers depends on both the data set and the start date.

~~~js title="Example 1. Data in the range less than a year" {16}
const heatMapData = [
Expand All @@ -771,7 +769,7 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "15/03/22" to "14/03/23" inclusively (i.e. for one year).
The chart then covers the period from "15/03/22" to "14/03/23" inclusive (that is, one year).

~~~js title="Example 2. Data in the range more than a year" {18}
const heatMapData = [
Expand Down Expand Up @@ -800,11 +798,11 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "15/03/22" to "14/03/24" inclusively (i.e. for two years).
The chart then covers the period from "15/03/22" to "14/03/24" inclusive (that is, two years).

#### 3. endDate

If you specify the end date but don't specify the start date, the period for which the chart will displayed depends both on the data set and the end date. Note, that in this case the chart will start from the 1st of January of the minimal year found in the dataset.
If you specify the end date but not the start date, the period that the chart covers depends on both the data set and the end date. Note that the chart starts from January 1 of the earliest year in the data set.

~~~js {18}
const heatMapData = [
Expand Down Expand Up @@ -833,11 +831,11 @@ const chart = new dhx.Chart("chart_container", config);
chart.data.parse(heatMapData);
~~~

As a result, the chart will be displayed for the period from "01/01/22" to "15/05/23" inclusively.
The chart then covers the period from "01/01/22" to "15/05/23" inclusive.

## Mixed graphs in one chart

You can create a chart that combines several graphs of different types. Define each graph as an object in the `series` array and set the desired chart type via the `type` property. For example:
You can create a chart that combines graphs of different types. Define each graph as an object in the `series` array and set its type in the `type` property. For example:

~~~jsx
const chart = new dhx.Chart("chart_container", {
Expand Down
Loading