How to set the chart pie color in correct orders?

Question

I am working on chart pie to input the data and I want to make the correct order for the chart pie color, I want to make the green pie to go on the left and the blue pie to go on the right.

var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  legend:{
    position: 'right'
  },
  
  data: {
    labels: ["Opened", "Clicked"],

    datasets: [{
        data: [
            opened_today,
            clicked_today
        ],
        backgroundColor: [
            "#28a745",
            "#007bff"
        ],
    }],
  },
});

.chartjs-render-monitor {
    animation: chartjs-render-animation 1ms;
}

Here is what my chart pie show:

When I try this:

var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Opened", "Clicked"],

    datasets: [{
        data: [
            
            clicked_today,
            opened_today
        ],
        backgroundColor: [
            
            "#007bff",
            "#28a745"
        ],
    }],
  },
});

I am getting this:

Here is what I want to achieve:

Can you please show me an example how I can make the green pie to go on the left and the blue pie to go on the right?

Thank you.

user_7380779 · Answer

Ok, you have to choose your data/color following clockwise, first clicked/blue then opened/green.

All settings for legend have to be inside key options

For legend, reverse does the job

var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  options: {
    legend: {
      reverse:true,
      position: 'top',
      labels: {
        fontColor: 'gray'
      }
    }
  },
  data: {
    labels: ["Clicked","Opened"],
    datasets: [{
      data: [
        clicked_today,
        opened_today,
      ],
      backgroundColor: [
        "#007bff", //blue
        "#28a745", //green,
      ],
    }],
  },
});

.chartjs-render-monitor {
  animation: chartjs-render-animation 1ms;
}

How to set the chart pie color in correct orders?

1 Answers