apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.05k stars 1.28k forks source link

Add a color Attribute for range column/bar chart #4460

Open fr4nk3nst3in opened 1 month ago

fr4nk3nst3in commented 1 month ago

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.:

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'}
      ],
    },

  ]

Intended Use Case

How it's looking now

image
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 image