cant change the color fill for radial bars

[chokies]

below is my current implementation. im trying to make the colors dynamic but it seems like its always stuck on the default blue color

`<script>

export default {

props: ['id','chartClass', 'fillColor', 'label'], 

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']
                },
                color: [this.fillColor],
                stroke: {
                    dashArray: 4
                },
            },
            labels: [this.label],
        }
    }
},

mounted () {
    
    
    
}

}
</script>`

[junedchhipa]

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

[chokies]

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!