Open fr4nk3nst3in opened 1 month ago
To build a water fall chart with a range chart, I want to use different colors for the values and total.
Add color attribute for a datapoint/datarange. e.g.:
series: [ { data: [ { x: 'Team A', y: [0, 5], color: ['#CECECE'] }, { x: 'Team B', y: [5, 7], color: ['#CECECE'] }, { x: 'Team C', y: [7, 8], color: ['#CECECE'] }, {x: 'Total', y:[0,8], color:'#FFFFFF'} ], }, ]
How it's looking now
var options = { series: [ { data: [ { x: 'Team A', y: [0, 5], color: ['#CECECE'] }, { x: 'Team B', y: [5, 7], color: ['#CECECE'] }, { x: 'Team C', y: [7, 8], color: ['#CECECE'] }, {x: 'Total', y:[0,8], color:'#FFFFFF'} ], }, ], chart: { type: 'rangeBar', height: 350, }, plotOptions: { bar: { horizontal: false, }, }, dataLabels: { enabled: true, }, }; var chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();
And how it should looks like
Summary
To build a water fall chart with a range chart, I want to use different colors for the values and total.
API Changes
Add color attribute for a datapoint/datarange. e.g.:
Intended Use Case
How it's looking now
And how it should looks like![image](https://github.com/apexcharts/apexcharts.js/assets/4451184/780f8068-fb8a-4f42-8975-18838d8e99c4)