Skip to content
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.

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

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

Open
fr4nk3nst3in opened this issue May 11, 2024 · 0 comments
Open

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

fr4nk3nst3in opened this issue May 11, 2024 · 0 comments
Labels
feature-request New feature or request

Comments

@fr4nk3nst3in
Copy link

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

@fr4nk3nst3in fr4nk3nst3in added the feature-request New feature or request label May 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant