How to assign different colors to each bar in react apext chart?

user_8878731 0
Viewed 411

I want different colors for different bars in React apex chart. How can achieve it?

Please, find below the snippet for Bar chart which is using to set all properties inside state of reactjs.

I am using the react-apexchart npm library.

 this.state = {
      series: [{
        data: [422, 413, 93]
      }],
      
      options : {
        chart: {
        height: 200,
        type: 'bar',
      },
      plotOptions: {
        bar: {
          dataLabels: {
            position: 'center', // top, center, bottom
          },
        }
      },
      dataLabels: {
        enabled: true,
        offsetY: -20,
        style: {
          fontSize: '12px',
          colors: ["#fff"]
        }
      },
      xaxis: {
        categories: ['Alerts', 'Service Requests', 'Incidents'],
        position: 'bottom',
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },
        crosshairs: {
          fill: {
            type: 'gradient',
            gradient: {
              colorFrom: '#D8E3F0',
              colorTo: '#BED1E6',
              stops: [0, 100],
              opacityFrom: 0.4,
              opacityTo: 0.5,
            }
          }
        },
        tooltip: {
          enabled: true,
        }
      },
      yaxis: {
          show: false
        },
      grid: { show: false, },
      colors: ['#c00000','#000', '#333'],
      title: {
        text: 'ALL HTI Tickets in GSD (928k Tickets YTD)',
        floating: true,
        offsetY: 330,
        align: 'center',
        style: {
          color: '#444',
          fontSize: '14',
          fontWeight: '600'
        }
      }
    } //option
        
        };
apexcharts npm reactjs bar-chart
1 Answers

You just have to add one property as below: distributed: true

    this.state = {
          series: [{
            data: [422, 413, 93]
          }],
          
          options : {
            chart: {
            height: 200,
            type: 'bar',
          },
          plotOptions: {
            bar: {
              dataLabels: {
                position: 'center', // top, center, bottom
              },
    distributed: true
            }
          },
          dataLabels: {
            enabled: true,
            offsetY: -20,
            style: {
              fontSize: '12px',
              colors: ["#fff"]
            }
          },
          xaxis: {
            categories: ['One', 'Two', 'Three'],
            position: 'bottom',
            axisBorder: {
              show: false
            },
            axisTicks: {
              show: false
            },
            crosshairs: {
              fill: {
                type: 'gradient',
                gradient: {
                  colorFrom: '#D8E3F0',
                  colorTo: '#BED1E6',
                  stops: [0, 100],
                  opacityFrom: 0.4,
                  opacityTo: 0.5,
                }
              }
            },
            tooltip: {
              enabled: true,
            }
          },
          yaxis: {
              show: false
            },
          grid: { show: false, },
          colors: ['#c00000','#000', '#333'],
          title: {
            text: 'heading',
            floating: true,
            offsetY: 330,
            align: 'center',
            style: {
              color: '#444',
              fontSize: '14',
              fontWeight: '600'
            }
          }
        } //option
            
            };

Run It On Codepen

user_62698310
Related