Vue Apexcharts colors in pie chart

Question

Hi i have this single pie chart made via Apex charts in vue. I want to customize the color of each part tho.

  new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: {

      series: [44, 55, 13],
      chartOptions: {
        chart: {
          width: 380,
          type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      },


    },

  })

And this is the html part:

 <div id="chart">
        <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
      </div>

I tried looking in the apex doc for pie charts but couldn't find anything about colors https://apexcharts.com/docs/chart-types/pie-donut/

So how should I edit the code for showing Team A in red, Team B in blue and Team C in green? I really don't like the default colors but in the code above they're nowhere to be found.

I'm guessing I need to add some kind of attribute somewhere.

Thank you a lot

Answer 1

All the major chart configuration will go in :options="chartOptions" prop.

data: {
  chartOptions: {
    colors: ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF']
  },
}