cant change the color fill for radial bars about vue-apexcharts HOT 2 CLOSED

You have fill and stroke at the wrong places. It needs to be 1 step outside the plotOptions

data() {
  return {
    series: [55],
    chartOptions: {
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
          hollow: {
            margin: 0,
            size: '50%',
            dropShadow: {
              enabled: false,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            },
          },

          track: {
            background: '#DDD',
            strokeWidth: '100%',
            margin: 0 // margin is in pixels
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: 20,
              show: true,
              color: '#333',
              fontSize: '14px'
            },
            value: {
              formatter: function (val) {
                return parseInt(val);
              },
              color: '#DDD',
              fontSize: '30px',
              show: true,
              offsetY: -15,
            }
          }
        },              
      },
      fill: {
        type: 'solid',
        colors: ['#F44336', '#E91E63', '#9C27B0']
      },
      stroke: {
        dashArray: 4
      },
    }
  }
},

Or, you can also directly target the outermost colors property in chartOptions

data() {
  return {
    series: [55],
    chartOptions: {
       colors: ['#3ec23e']
     }
  }
},

from vue-apexcharts.

You have fill and stroke at the wrong places. It needs to be 1 step outside the plotOptions

data() {
  return {
    series: [55],
    chartOptions: {
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
          hollow: {
            margin: 0,
            size: '50%',
            dropShadow: {
              enabled: false,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            },
          },

          track: {
            background: '#DDD',
            strokeWidth: '100%',
            margin: 0 // margin is in pixels
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: 20,
              show: true,
              color: '#333',
              fontSize: '14px'
            },
            value: {
              formatter: function (val) {
                return parseInt(val);
              },
              color: '#DDD',
              fontSize: '30px',
              show: true,
              offsetY: -15,
            }
          }
        },              
      },
      fill: {
        type: 'solid',
        colors: ['#F44336', '#E91E63', '#9C27B0']
      },
      stroke: {
        dashArray: 4
      },
    }
  }
},

Or, you can also directly target the outermost colors property in chartOptions

data() {
  return {
    series: [55],
    chartOptions: {
       colors: ['#3ec23e']
     }
  }
},

thanks it worked!

from vue-apexcharts.