Apexcharts - цвета ярлыков не совпадают

Question

Я назначил меткам три разных цвета, но цветные точки всегда отображаются как синий, зеленый и желтый. Я почти уверен, что сделал что-то не так.

Код, который я написал:

var pieSimpleChart = {
  chart: {
    height: 350,
    type: 'pie',
  },
  legend: {
    position: 'bottom'
  },
  labels: ["IT", "Product Development", "Sales"],
  series: [2, 2, 6],
  fill: {
    colors: ["#447b40", "#cc7870", "#e74ce4"]
  }
}

var chart = new ApexCharts(document.querySelector("#task-pie-chart"), pieSimpleChart);
chart.render();

Как я могу сопоставить метки с выбранными мной цветами?

Answer 1

Я исправил это, убрав опцию "заливка". Теперь код выглядит так:

    var pieSimpleChart = 
    {
        chart: 
        {
            height: 350,
            type: 'pie',
        },
        legend: 
        {
            position: 'bottom'
        },
        labels: ["IT", "Product Development", "Sales"],
        series: [2, 2, 6],
        colors: ["#447b40", "#cc7870", "#e74ce4"]
    }

Answer 2

Используйте backgroundColor вместо fill: colors.

Кроме того, вы должны использовать объект dataset для передачи значений:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["IT", "Product Development", "Sales"],
        datasets: [{
            backgroundColor: [
                "#ff0000",
                "#00ff00",
                "#0000ff"
            ],
            data: [2, 2, 6]
        }]
    },
    options: {
        legend: {
            position: 'bottom'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>