ChartJS comapring data

I have been working on a broadband management website.I want to show the user how much data he/she has used.For example if the total data they have in their name is 300GB.If they have used 150GB the remaining is 150GB right?.How to do i visualize this using a doughnut chart,Using ChartJS.

I have some code going but im not sure how to accomplish this please help me out

  ```  var ctx = document.getElementById('myChart').getContext('2d');
var constdata=document.getElementById("constantdata").textContent;
var data=document.getElementById("data").textContent;
console.log(data);
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
    data: {
        datasets: [{
            label: 'My First dataset',
            backgroundColor: ['red','green'],
            borderColor: 'rgb(255, 99, 132)',
            data: [300,150] //300 being the total data,150 being the data used
        }]
    },

    // Configuration options go here
    options: {}  ```

But the above code isnt working out.Assume a doughnut chart,If the used data is 150GB(out of 300).The doughnut
chart must be like the left side image.But what im getting is the right side