Chartjs-Two different x-axes using charts.js and react

This is my approach:

var chartData = {
    labels: ['15:00', '18:00', '21:00', '00:00', '03:00', '06:00', '09:00', '12:00'],
    datasets: [
        {
            fillColor: "#FFF5D7",
            strokeColor: "#FFCC01",
            data: [18, 19, 18, 16, 15, 15, 16, 17, 18]
        }
    ]
};

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 3,
    scaleStartValue : 0,
    showTooltips: false,
    onAnimationComplete: function () {
        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, 20);
            });
        })
    }
});

https://jsfiddle.net/MartinGK/u4Lr8gzw/31/

Maybe it will help you get started.

I recommend to continue reading the documentation.

To match the Google Weather example with values floating over data points, what you really need is a plugin like chartjs-plugin-datalabels.

Install it via npm:

npm install chartjs-plugin-datalabels --save

Import:

import 'chartjs-plugin-datalabels';

And include it in your options object:

plugins: {
   datalabels: {
      display: true
   }
}

This will add data labels on top of your data points. See the documentation for further information on how to customize the data labels.

I’ve made your chart look like the Google Weather chart with a couple other changes. Here’s a full example using your data:

Some of the changes I made include:

• Added datalabels plugin
• Set colors accordingly
• Set pointRadius to 0 on your dataset
• Removed your extra X axis
• On each axis, set drawBorder: false and tickMarkLength: 0

{
  type: 'line',
  data: {
    labels: ['15:00', '18:00', '21:00', '00:00', '03:00', '06:00', '09:00', '12:00'], //time
    datasets: [{
      data: [18, 19, 18, 16, 15, 15, 16, 17, 18], //temp
      backgroundColor: '#fff5cc',
      borderColor: '#fc0',
      pointRadius: 0,
    }],
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawBorder: false,
          tickMarkLength: 0,
        },
        ticks: {
          suggestedMin: 13, // lowest from data minus 2/3
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawBorder: false,
          tickMarkLength: 0,
        },
        ticks: {
          fontColor: '#bababa',
        }
      }]
    },
    legend: {
      display: false
    },
    layout: {
      padding: {
        top: 20
      }
    },
    plugins: {
      datalabels: {
        align: 'top',
        color: '#bababa',
        font: {
          weight: 'bold'
        },
        display: true,
      },
    },
  }
}