score:-1

yes, just use object notation:

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of votes',
        data: [{
          x: new date('09-08-2021 12:04'),
          y: 10
        }, {
          x: new date('09-08-2021 12:08'),
          y: 15
        }, {
          x: new date('09-08-2021 12:12'),
          y: 5
        }, {
          x: new date('09-08-2021 12:30'),
          y: 8
        }],
        bordercolor: 'pink'
      },
      {
        type: 'bar',
        label: '# of points',
        data: [{
          x: new date('09-08-2021 12:04'),
          y: 4
        }, {
          x: new date('09-08-2021 12:08'),
          y: 6
        }, {
          x: new date('09-08-2021 12:12'),
          y: 12
        }, {
          x: new date('09-08-2021 12:30'),
          y: 18
        }, {
          x: new date('09-08-2021 12:022'),
          y: 10
        }, {
          x: new date('09-08-2021 12:38'),
          y: 15
        }, {
          x: new date('09-08-2021 12:52'),
          y: 5
        }, {
          x: new date('09-08-2021 12:59'),
          y: 8
        }],
        backgroundcolor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
      }
    }
  }
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
</body>

score:0

using timeseries as x-axis, applying additional trick:

try following:

  1. set x-axis type to timeseries:
    for each x-axis scales: {'daily-x-axis': { type: 'timeseries' ...
    for x-axis type 'time' or 'timeseries' to work, you need additional libraries (like moment.js and its adapter)
  2. trick: for monthly totals in your data, use first day of month as x value, like x: "2021-01-01" etc ...
  3. style your bars and labels/ticks, adding backgroundcolor: 'rgba(0,0,255,0.5)', x- and y-axis label colors, color of ticks, etc ...

let dailygeneration = [{x: '2021-01-01', y: 1},{x: '2021-01-02', y: 3},{x: '2021-01-03', y: 2},{x: '2021-01-04', y: 5},{x: '2021-01-05', y: 8},{x: '2021-01-06', y: 2},{x: '2021-01-07', y: 11},{x: '2021-01-08', y: 10},{x: '2021-01-09', y: 7},{x: '2021-01-10', y: 6},{x: '2021-01-11', y: 1.5},{x: '2021-01-12', y: 3},{x: '2021-01-13', y: 4},{x: '2021-01-14', y: 6},{x: '2021-01-15', y: 0.5},{x: '2021-01-16', y: 3},{x: '2021-01-17', y: 9},{x: '2021-01-18', y: 8},{x: '2021-01-19', y: 7},{x: '2021-01-20', y: 6},{x: '2021-01-21', y: 6},{x: '2021-01-22', y: 4},{x: '2021-01-23', y: 3},{x: '2021-01-24', y: 1},{x: '2021-01-25', y: 1},{x: '2021-01-26', y: 2},{x: '2021-01-27', y: 5},{x: '2021-01-28', y: 8},{x: '2021-01-29', y: 7},{x: '2021-01-30', y: 12},{x: '2021-01-31', y: 2},
{x: '2021-02-01', y: 1},{x: '2021-02-02', y: 3},{x: '2021-02-03', y: 2},{x: '2021-02-04', y: 5},{x: '2021-02-05', y: 8},{x: '2021-02-06', y: 2},{x: '2021-02-07', y: 11},{x: '2021-02-08', y: 10},{x: '2021-02-09', y: 7},{x: '2021-02-10', y: 6},{x: '2021-02-11', y: 1.5},{x: '2021-02-12', y: 3},{x: '2021-02-13', y: 4},{x: '2021-02-14', y: 6},{x: '2021-02-15', y: 0.5},{x: '2021-02-16', y: 3},{x: '2021-02-17', y: 9},{x: '2021-02-18', y: 8},{x: '2021-02-19', y: 7},{x: '2021-02-20', y: 6},{x: '2021-02-21', y: 6},{x: '2021-02-22', y: 4},{x: '2021-02-23', y: 3},{x: '2021-02-24', y: 1},{x: '2021-02-25', y: 1},{x: '2021-02-26', y: 2},{x: '2021-02-27', y: 5},{x: '2021-02-28', y: 8}];

let montlytotals = [{x: '2021-01-01', y: 98},{x: '2021-02-01', y: 120}];

let yourdata = {
  datasets: [{
    type: 'line',
    label: 'daily generation',
    data: dailygeneration,
    bordercolor: 'rgba(0,0,255,1)',
    xaxisid: 'daily-x-axis',
    yaxisid: 'daily-y-axis',
  },
  {
    type: 'bar',
    label: 'monthly totals',
    data: montlytotals,
    bordercolor: 'rgba(0,255,0,0.5)',
    backgroundcolor: 'rgba(0,255,0,0.5)',
    xaxisid: 'monthly-x-axis',
    yaxisid: 'monthly-y-axis',
  }]
};

let youroptions = {
  scales: {
    // x-axis by their ids
    'daily-x-axis': { // <-- v3.x now object "{", not array "[{" anymore
      type: 'timeseries', // <-- try "time" and "timeseries" to see difference
      time: {
        unit: 'day', // <-- set to 'day'
        displayformats: {
          day: 'mmm dd, yyyy',
          month: 'mmm'
        },
        tooltipformat: 'dddd, mmm dd, yyyy'
      },
      ticks: {
        minrotation: 80, // avoiding overlapping of x-axis ticks
        maxrotation: 90,
        color: "blue"
      },
      position: 'bottom'
    },
    'monthly-x-axis': {
      type: 'timeseries', // <-- try "time" and "timeseries" to see difference
      time: {
        unit: 'month', // <-- set to 'month'
        displayformats: {
          day: 'mmm dd, yyyy',
          month: 'mmm'
        },
        tooltipformat: 'mmm, yyyy'
      },
      ticks: {
        color: "green"
      },
      position: 'bottom'
    },
    // y-axis by their ids
    'daily-y-axis': {
      position: 'left',
      title: {
        display: true,
        text: 'kwh / day',
        color: "blue"
      },
      ticks: {
        color: "blue"
      }
    },
    'monthly-y-axis': {
      position: 'right',
      title: {
        display: true,
        text: 'total kwh / month',
        color: "green"
      },
      ticks: {
        color: "green"
      }
    }
  }
};

const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');

const mychart = new chart(ctx, {
  data: yourdata,
  options: youroptions
});
<!-- get the latest version of chart.js, now at v3.5.1 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- for x-axis type 'time' or 'timeseries' to work, you need additional libraries -->
<!-- (like moment.js and its adapter) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

<canvas id="chartjscontainer" width="600" height="400"></canvas>


Related Query

More Query from same tag