Change horizontal line chart to vertical line

user_19178566 0
Viewed 62

I'm using chartjs to generate a line chart with 2 datasets with 2 different data label on the x-axis.

Currently My chart looks like this below current horizontal line chart

I want to make my line chart vertical in such a way that x-axis (date) moves to y-axis and Y-axis (number) moves to x-axis. I added a indexAxis: 'y' in the option in JS script but it doesn't seem to work and my line graphs not showing any lines anymore. Can anyone tell me what went wrong in my codes? Thanks

const data = {
      datasets: [
        {label: 'PZ-1',
        data: [
          {x:'2022-03-01', y:3},
          {x:'2022-03-02', y:6},
          {x:'2022-03-03', y:9},
          {x:'2022-03-04', y:8}
        ],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)'
        ],
        borderWidth: 1},
        {label: 'PZ-2',
        data: [
          {x:'2022-03-03', y:10},
          {x:'2022-03-04', y:12},
          {x:'2022-03-05', y:13},
          {x:'2022-03-06', y:10}
        ],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)'
        ],
        borderWidth: 1},
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };
    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
* {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(255, 26, 104, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 1000px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(255, 26, 104, 1);
        background: white;
      }
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Chart</title>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </body>
</html>

chart.js html javascript
1 Answers

You need to adjust your data, you still provide your data as if your x axis is the index axis.

To solve your issue change the x and y keys in your data object and it will work fine:

data: [{
    y: '2022-03-01',
    x: 3
  },
  {
    y: '2022-03-02',
    x: 6
  },
  {
    y: '2022-03-03',
    x: 9
  },
  {
    y: '2022-03-04',
    x: 8
  }
],

Live sample:

const data = {
  datasets: [{
      label: 'PZ-1',
      data: [{
          y: '2022-03-01',
          x: 3
        },
        {
          y: '2022-03-02',
          x: 6
        },
        {
          y: '2022-03-03',
          x: 9
        },
        {
          y: '2022-03-04',
          x: 8
        }
      ],
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)'
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)'
      ],
      borderWidth: 1
    },
    {
      label: 'PZ-2',
      data: [{
          y: '2022-03-03',
          x: 10
        },
        {
          y: '2022-03-04',
          x: 12
        },
        {
          y: '2022-03-05',
          x: 13
        },
        {
          y: '2022-03-06',
          x: 10
        }
      ],
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)'
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)'
      ],
      borderWidth: 1
    },
  ]
};
// config 
const config = {
  type: 'line',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Line Chart</title>
</head>

<body>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>

</html>

user_86829830
Related