Chart.js bar chart centered for 1 item chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js bar chart centered for 1 item chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Tryggvi Gylfason</title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="400" height="400"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script>
      var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {//from   ww  w  . ja  va 2s.c om
    type: 'bar',
    data: {
        "labels": ["2018-06-01T04:00:00.000Z"],
        "datasets": [{
            "type": "bar",
            "label": "Earnings",
            "yAxisID": "left-y-axis",
            "borderColor": "rgba(107, 165, 57, 1)",
            "backgroundColor": "rgba(107, 165, 57, 0.4)",
            "data": [25.77]
        }, {
            "type": "line",
            "label": "Pageviews",
            "yAxisID": "right-y-axis",
            "backgroundColor": "rgba(70, 152, 203, 0.4)",
            "borderColor": "rgba(70, 152, 203, 1)",
            "pointBackgroundColor": "rgba(70, 152, 203, 1)",
            "pointRadius": 0,
            "data": [3426]
        }]
    },
    options: {
        "scales": {
            "xAxes": [{
                "maxBarThickness": 100,
            }],
            "yAxes": [{
                "id": "left-y-axis",
                "type": "linear",
                "position": "left",
                "ticks": {
                    "beginAtZero": true
                },
                "scaleLabel": {
                    "display": true,
                    "labelString": "Earnings"
                }
            }, {
                "id": "right-y-axis",
                "type": "linear",
                "position": "right",
                "ticks": {
                    "beginAtZero": true
                },
                "gridLines": false,
                "scaleLabel": {
                    "display": true,
                    "labelString": "Pageviews"
                }
            }]
        },
        "tooltips": {
            "callbacks": {}
        }
    }
});
      </script>  
   </body>
</html>

Related Tutorials