Apexcharts - Label colours do not match

Question

I've assigned three different colours to the labels, but the colour dots always show up as Blue, Green and Yellow. I'm pretty sure I've done something wrong.

The code I've written is:

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();

How can I match the labels to my selected colours?

score 8 · Accepted Answer · answered May 29 '20 at 15:44

8

I fixed it by removing "fill" option. Now code looks like:

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

answered May 29 '20 at 15:44

Anant Mishra

150
1
2
10

Can someone please help? https://stackoverflow.com/questions/62590738/how-to-remove-the-horizontal-lines-of-chart-its-axis-lines-in-angular – reacg garav Jun 26 '20 at 10:35

prasad tikkas · Answer 2 · 2023-06-17T18:19:51.920

Add colour tag after labels. With this you can use colour of your choice.

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

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

score -1 · Answer 3 · answered May 29 '20 at 15:25

Use backgroundColor instead off fill: colors.

Also, you should use the dataset object for passing the values:

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>

Can someone please help? https://stackoverflow.com/questions/62590738/how-to-remove-the-horizontal-lines-of-chart-its-axis-lines-in-angular — reacg garav, Jun 26 '20 at 10:35
your answer is for charts.js the question referrers to Apex charts — Wajdan Zahid, Aug 25 '21 at 17:49

Apexcharts - Label colours do not match

3 Answers3