Set Category scale on Y-axis and time on x-axis in bubble chart using Chartjs - Javascript Chart.js

Javascript examples for Chart.js:Bubble Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bubble Chart

Description

Set Category scale on Y-axis and time on x-axis in bubble chart using Chartjs

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <body translate="no">  
      <canvas id="bubble"></canvas>  
      <script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script> 
      <script>
      Chart.defaults.global.defaultFontColor = '#fff'
  var bubbleBackgroundColor = function() {
            return 'rgba(255, 206, 86, 0.2)'
  };/*  w ww. j a va 2s  .c  o  m*/
  var bubbleBorderColor = function() {
            return 'rgba(255, 206, 86, 1)'
  };
  var bubbleChartData = {
    animation: {
      duration: 10000
    },
    yLabels: ["Mon", "Tue", "wed", "Thu"],
    datasets: [{
      label: "Requests and bookings",
      fill: false,
      lineTension: 0.1,
      backgroundColor: bubbleBackgroundColor(),
      borderColor: bubbleBorderColor(),
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)",
      pointHoverBorderColor: "rgba(153, 102, 155, 1)",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data:[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]
    }]
  };
  var ctx = document.getElementById('bubble');
  var bubble = new Chart(ctx, {
    type: 'bubble',
    data: bubbleChartData,
    options: {
      responsive: true,
      title: {
        display: true,
        text:'Weekly activity'
      },
        scales: {
          yAxes: [{
              type: 'category',
              position: 'left',
              ticks: {
                min: "Mon",
                max: "Thu"
              }
          }],
          xAxes: [{
              type: 'time',
              time: {
                  displayFormats: {
                      minute: 'hh:mm a'
                  }
              }
          }]
        }
    }
  });
      </script>  
   </body>
</html>

Related Tutorials