Chartjs-ChartJs multiaxis chart show different label bottom and top

by

2👍

✅

You will need to do two things:
1. assign an xAxis to each data set
2. set different options for the xAxes inside of the options object

I started an example here — note the xAxesID and scales array

data: {
  labels:other_data_label,
  datasets:[{
              data: behaviour_fixed_array, //processing_information_data,
              backgroundColor: 'rgba(102, 187, 158,0.2)',
              borderColor: 'rgb(102,187,158)',
              pointBackgroundColor:'rgb(67, 122, 103)',
              xAxisID: 'x-axis-1'
            },
            {
              backgroundColor: 'rgba(188,101,47,0.2)',
              borderColor: 'rgb(168,101,47)',
              pointBackgroundColor:'rgb(155, 21, 6)',
              data: [],
              xAxisID: 'x-axis-2'
            }]
          },
          options: {
            legend: {
              position: 'top',
              display: false
            },
            scales: {
              xAxes: [{
                display: true,
                position: 'top',
                id: 'x-axis-1'
              },
              {
                display: true,
                position: 'bottom',
                id: 'x-axis-2'
              }]
            },
            responsive:true,
            maintainAspectRatio: true,
          }
        });

Leave a comment