Chartjs-ChartJS adding 3yAxes

by

0👍

✅

The chart is not loading because, you haven’t defined the chart type (bar, line etc.).

SO, define the chart type, as such :

...
var LineGraph = new Chart(ctx, {
         type: 'line',
         data: chartdata,
         ...

Now, to add three y-axis, first you need to set yAxisID for each dataset, like so :

...
datasets: [{
   ...,
   yAxisID: 'price'
}, {
   ...,
   yAxisID: 'reviews'
}, {
   ...,
   yAxisID: 'stock'
}]
...

then, add three separate y-axis and set their id in your chart options, as such :

options: {
   scales: {
      yAxes: [{
         id: 'price'
      }, {
         id: 'reviews'
      }, {
         id: 'stock'
      }]
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t12.json",
      type: "GET",
      success: function(data) {
         console.log(data);

         var stock = [];
         var price = [];
         var reviews = [];
         var date = [];

         for (var i in data) {
            stock.push(data[i].stock);
            price.push(data[i].price);
            reviews.push(data[i].rating);
            date.push(data[i].scrape_date);
         }

         var chartdata = {
            labels: date,
            datasets: [{
               label: "price",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(59, 89, 152, 0.75)",
               borderColor: "rgba(59, 89, 152, 1)",
               pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
               pointHoverBorderColor: "rgba(59, 89, 152, 1)",
               data: price,
               yAxisID: 'price'

            }, {
               label: "reviews",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(29, 202, 255, 0.75)",
               borderColor: "rgba(29, 202, 255, 1)",
               pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
               pointHoverBorderColor: "rgba(29, 202, 255, 1)",
               data: reviews,
               yAxisID: 'reviews'

            }, {
               label: "stock",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(211, 72, 54, 0.75)",
               borderColor: "rgba(211, 72, 54, 1)",
               pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
               pointHoverBorderColor: "rgba(211, 72, 54, 1)",
               data: stock,
               yAxisID: 'stock'
            }]
         };
         var ctx = $("#mycanvas");

         var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata,
            options: {
               scales: {
                  yAxes: [{
                     id: 'price'
                  }, {
                     id: 'reviews'
                  }, {
                     id: 'stock'
                  }]
               }
            }
         });
      },
      error: function(data) {

      }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="mycanvas"></canvas>

Leave a comment