Chart.js Multiple barchart in time scale - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js Multiple barchart in time scale

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Sandbox</title> 
      <style>

.container {/* w w w. j a  v a  2 s  .  com*/
   display: flex;
   height: 100%;
   width: 100%;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <canvas class="line-chart"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
      <script>
      var element = document.querySelector('.line-chart');
var options = {
    legend: {
        position: 'bottom' },
    hover: {
        mode: 'point',
        intersect: false },
    tooltips: {
        mode: 'x',
        intersect: false,
        callbacks: {
            title: function title(tooltip, data) {
                return;
            },
            label: function label(tooltip, data) {
                return;
            },
            footer: function footer(tooltip, data) {
                return;
            } } },
    scales: {
        xAxes: [{
            id: 'timescale',
            type: 'time',
            unit: 'day',
            unitStepSize: 1,
            time: {
                displayFormats: {
                    'millisecond': 'DD MMMM YYYY HH:mm',
                    'second': 'mm:ss',
                    'minute': 'HH:mm',
                    'hour': 'HH:mm',
                    'day': 'DD MMM',
                    'week': 'DD MMM',
                    'month': 'DD MMMM',
                    'quarter': '[Q]Q - YYYY',
                    'year': 'YYYY' } },
            display: true,
            position: 'bottom',
            scaleLabel: {
                display: true,
                labelString: "Heure" },
            offset: true }],
        yAxes: [{
            id: 'consumption',
            type: 'linear',
            position: 'left',
            ticks: {
                beginAtZero: true },
            scaleLabel: {
                display: true,
                labelString: "Consommation" } }] } };
var graph = new Chart(element, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: 'datasets1',
            type: 'bar',
            backgroundColor: Chart.helpers.color('#0000FF').alpha(0.5).rgbString(),
            borderColor: '#0000FF',
            unite: null,
            yAxisID: 'consumption',
            data: [{ x: '2017-10-26T22:00:00.000Z', y: 73.16 }, { x: '2017-11-27T22:00:00.000Z', y: 36.16 }] },
        {
            label: 'datasets2',
            type: 'bar',
            backgroundColor: Chart.helpers.color('#FF0000').alpha(0.5).rgbString(),
            borderColor: '#FF0000',
            unite: null,
            yAxisID: 'consumption',
            data: [{ x: '2017-10-26T22:00:00.000Z', y: 87.16 }, { x: '2017-11-27T22:00:00.000Z', y: 24.16 }] }] },
    options: options });
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials