From 40da26ee4043b766943f8ee7c34e84b35d94d817 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 15 Apr 2026 14:39:32 +0300 Subject: [PATCH] [add] a section on using multiple graphs types in a chart --- docs/chart/configuration_properties.md | 37 +++++++++++++++++++++++++- docs/chart/features.md | 2 +- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/docs/chart/configuration_properties.md b/docs/chart/configuration_properties.md index d143bcf1..ce94ec09 100644 --- a/docs/chart/configuration_properties.md +++ b/docs/chart/configuration_properties.md @@ -833,4 +833,39 @@ 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. \ No newline at end of file +As a result, the chart will be displayed for the period from "01/01/22" to "15/05/23" inclusively. + +## 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: + +~~~jsx +const chart = new dhx.Chart("chart_container", { + series: [ + { + id: "A", + type: "line", + value: "company A", + color: "red", + fill: "#FDBBBB" + }, + { + id: "B", + type: "bar", + value: "company B", + color: "blue", + fill: "lightblue" + }, + { + id: "C", + type: "area", + value: "company C", + fill: "lightgreen", + color: "green" + } + ], + // other configuration properties +}); +~~~ + +**Related sample**: [Chart. Line, Spline and Area charts together](https://snippet.dhtmlx.com/eti3i33o) \ No newline at end of file diff --git a/docs/chart/features.md b/docs/chart/features.md index f034f1fc..45e3a2ee 100644 --- a/docs/chart/features.md +++ b/docs/chart/features.md @@ -70,7 +70,7 @@ In this section you can discover how to configure a Chart legend, scales, and se | [Configuring series](../api/chart_series_config/#the-list-of-config-options-for-series-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure series for Pie, Pie3D, Donut charts | | [Configuring a legend](../api/chart_legend_config/#the-list-of-config-options-for-legend-for-charts-without-scales-treemap) | Learn how to configure a legend for Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) | | [Configuring series](../api/chart_series_config/#the-list-of-config-options-for-series-for-charts-without-scales-treemap) | Learn how to configure series for Treemap chart | -| [Configuring a mixed chart](https://snippet.dhtmlx.com/eti3i33o) | Learn how to configure Line, Spline and Area charts together | +| [Configuring a mixed chart](../configuration_properties/#mixed-graphs-in-one-chart) | Learn how to combine different types of graphs in one chart ([Example](https://snippet.dhtmlx.com/eti3i33o)) | | [Changing configuration on the fly](https://snippet.dhtmlx.com/7umj531n) | Learn how to set configuration of a chart dynamically | | [Displaying average values](../api/chart_maxpoints_config/) | Learn how to display a huge data set in the chart ([Example](https://snippet.dhtmlx.com/6917eudu)) |