Question

0

240

Views

Chartjs bar chart got clipped

I have a bar chart and I wanted to stacking the yellow bar over the purple and pink bar. Somehow the xAxes of the yellow bar start/end at the left/right corner so it got clipped on each sides. I want it to be at center like at value = 3 on the image below:

here's my code :

var ctx = document.getElementById('myChart');

        var mixedChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['1', '2', '3', '4', '5'],
          datasets: [
            {
              label: 'Total Trip',
              yAxisID: 'Total-Trip',
              data: [1000, 1350, 1230, 940, 640],
              type: 'line',
              backgroundColor: ['transparent']
            },
            {
              label: 'Orang',
              xAxisID: 'x-B',
              yAxisID: 'Orang-y',
              data: [50, 46, 44, 46, 49],
              backgroundColor: 'rgba(255, 206, 86)',
              barThickness: 30,
              clip: {
                left: 50, 
                right: 50
              }
            },
            {
              label: 'Travel Costs',
              xAxisID: 'x-A',
              yAxisID: 'Orang-y',
              data: [100, 96, 84, 76, 69],
              backgroundColor: 'rgba(255, 99, 132)',
            },
            {
              label: 'Travel Costs USD',
              xAxisID: 'x-A',
              yAxisID: 'Orang-y',
              data: [150, 106, 94, 96, 99],
              backgroundColor: 'rgba(155, 19, 232)',
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            labels: {
              render: 'value'
            }
          },
          scales: {
            yAxes: [
              {
                id: 'Total-Trip',
                display: false,
                type: 'linear',
                position: 'right',
                ticks: {
                  min: 0,
                }
              },
              {
                id: 'Orang-y',
                stacked: false,
                ticks: {
                  beginAtZero: true
                },
              }
            ],
            xAxes: [
              {
                id: 'x-A',
              },
              {
                id: 'x-B',
                stacked: true,
                clip: {
                  left: 50, 
                  right: 50
                }
              },
            ]
          }
        }
      });

or you can see here, please click Show Files and then choose bar-side-to-side.html

https://replit.com/@panjigemilang/html?v=1

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-06T16:00:27.994Z

I think offset and display properties will help:

   {
      id: 'x-B',
      offset:true,
      display:false
    },

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>
    Transaksi CBT - Non CBT
  </h1>
  <div class="panel">
    <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  <style>
    .panel {
      height: 400px;
      width: 400px;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous" referrerpolicy="no-referrer">
  </script>
  <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js" crossorigin="anonymous" referrerpolicy="no-referrer">
  </script>
  <script type="text/javascript">
    var ctx = document.getElementById('myChart');

    var mixedChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['1', '2', '3', '4', '5'],
        datasets: [{
            label: 'Total Trip',
            yAxisID: 'Total-Trip',
            data: [1000, 1350, 1230, 940, 640],
            type: 'line',
            backgroundColor: ['transparent']
          },
          {
            label: 'Orang',
            xAxisID: 'x-B',
            yAxisID: 'Orang-y',
            data: [50, 46, 44, 46, 49],
            backgroundColor: 'rgba(255, 206, 86)',
            barThickness: 30,
          },
          {
            label: 'Travel Costs',
            xAxisID: 'x-A',
            yAxisID: 'Orang-y',
            data: [100, 96, 84, 76, 69],
            backgroundColor: 'rgba(255, 99, 132)',
          },
          {
            label: 'Travel Costs USD',
            xAxisID: 'x-A',
            yAxisID: 'Orang-y',
            data: [150, 106, 94, 96, 99],
            backgroundColor: 'rgba(155, 19, 232)',
          }
        ]
      },
      options: {
        layout: {
          margin: 20
        },
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          labels: {
            render: 'value'
          }
        },
        scales: {
          yAxes: [{
              id: 'Total-Trip',
              display: false,
              type: 'linear',
              position: 'right',
              ticks: {
                beginAtZero: true
              }
            },
            {
              id: 'Orang-y',
              stacked: false,
              ticks: {
                beginAtZero: true
              }
            },
          ],
          xAxes: [{
              id: 'x-A',
            },
            {
              id: 'x-B',
              offset: true,
              display: false
            },
          ]
        }
      }
    });
  </script>
</body>

</html>

0

240

Chartjs bar chart got clipped

1 answers

0

Find remote jobs

Andres GPT