From 0539ab0ce4f50328e8432e560d9204dd5fd0f962 Mon Sep 17 00:00:00 2001 From: Esko Laaksonen Date: Mon, 31 Mar 2025 23:45:23 +0100 Subject: [PATCH 1/3] Added enabledOnSeries prop to plotOptions.line to allow rendering negative area with normal lines in the same chart --- .../area/area-with-negative-and-lines.html | 151 ++++++++++++++++++ src/modules/Fill.js | 6 +- 2 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 samples/react/area/area-with-negative-and-lines.html diff --git a/samples/react/area/area-with-negative-and-lines.html b/samples/react/area/area-with-negative-and-lines.html new file mode 100644 index 000000000..fa7d259d8 --- /dev/null +++ b/samples/react/area/area-with-negative-and-lines.html @@ -0,0 +1,151 @@ + + + + + + + Area with different negative color + + + + + + + + + + + + + + + + + + +
+ +
+ <div id="chart"> <ReactApexChart + options={state.options} series={state.series} type="area" + height={350} /> </div> +
+ + + + diff --git a/src/modules/Fill.js b/src/modules/Fill.js index f8c215f5b..958c298ea 100644 --- a/src/modules/Fill.js +++ b/src/modules/Fill.js @@ -163,7 +163,11 @@ class Fill { const drawMultiColorLine = cnf.plotOptions.line.colors.colorAboveThreshold && - cnf.plotOptions.line.colors.colorBelowThreshold + cnf.plotOptions.line.colors.colorBelowThreshold && + // undefined enabledOnnSeries means enabled on all series. + (!cnf.plotOptions.line.enabledOnSeries || + (Array.isArray(cnf.plotOptions.line.enabledOnSeries) && + cnf.plotOptions.line.enabledOnSeries.indexOf(this.seriesIndex) >= 0)) let fillColors = this.getFillColors() let fillColor = fillColors[this.seriesIndex] From 9bce87f21bcef5bafee4d226cdf93781dd5c760b Mon Sep 17 00:00:00 2001 From: Esko Laaksonen Date: Mon, 31 Mar 2025 23:54:59 +0100 Subject: [PATCH 2/3] Updated types for enabledOnSeries for line plotOptions --- types/apexcharts.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/apexcharts.d.ts b/types/apexcharts.d.ts index b0dab6b49..752d2c85f 100644 --- a/types/apexcharts.d.ts +++ b/types/apexcharts.d.ts @@ -514,6 +514,7 @@ type ApexLocale = { */ type ApexPlotOptions = { line?: { + enabledOnSeries?: undefined | number[] isSlopeChart?: boolean colors?: { threshold?: number, From 58f7f9ae2f25825e635871e4b4662c45541f8b10 Mon Sep 17 00:00:00 2001 From: Esko Laaksonen Date: Mon, 31 Mar 2025 23:57:52 +0100 Subject: [PATCH 3/3] Fixed typo on comment --- src/modules/Fill.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/Fill.js b/src/modules/Fill.js index 958c298ea..71a05c5b9 100644 --- a/src/modules/Fill.js +++ b/src/modules/Fill.js @@ -164,7 +164,7 @@ class Fill { const drawMultiColorLine = cnf.plotOptions.line.colors.colorAboveThreshold && cnf.plotOptions.line.colors.colorBelowThreshold && - // undefined enabledOnnSeries means enabled on all series. + // undefined enabledOnSeries means enabled on all series. (!cnf.plotOptions.line.enabledOnSeries || (Array.isArray(cnf.plotOptions.line.enabledOnSeries) && cnf.plotOptions.line.enabledOnSeries.indexOf(this.seriesIndex) >= 0))