Блог

Я хочу разные цвета для разных столбцов на диаграмме React apex. Как этого добиться?

Пожалуйста, найдите ниже фрагмент для гистограммы, который используется для настройки всех свойств внутри состояния reactjs.

Я использую библиотеку npm react-apexchart.

  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
        
        };
  

Вам просто нужно добавить одно свойство, как показано ниже: распределенный: 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
            
            };

  

Запустите его в Codepen