How is it possible to make curved bar chart or curved column charts in chart.js?

Question

We are trying to create curved column similar to the image below, it doesnt look possible in chart.js

Any suggestions regarding this?

Answer 1

You could do this with a line chart as illustrated in below code sample, which needs to be further improved to obtain the result you expect.

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5, 6, 7],
        datasets: [
          {
              data: [0, 5, 0, 0, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255, 0, 0, 0.7)',
              backgroundColor: 'rgb(255, 0, 0, 0.7)',
              lineTension: 0.4,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 9, 0, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255,165,0, 0.7)',
              backgroundColor: 'rgb(255,165,0, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 6, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255, 215, 0, 0.7)',
              backgroundColor: 'rgb(255, 215, 0, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 0, 5, 0, 0],
              fill: true,
              backgroundColor: 'rgb(59, 161, 151, 0.7)',
              backgroundColor: 'rgb(59, 161, 151, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 0, 0, 4, 0],
              fill: true,
              backgroundColor: 'rgb(100, 100, 100, 0.7)',
              backgroundColor: 'rgb(100, 100, 100, 0.7)',
              lineTension: 0.4,
              pointHitRadius: 0
          }
        ]
    },
    options: {
        responsive: true,
        elements: {
          point:{
            radius: 0
          }
        },
        title: {
            display: false,
        },
        legend: {
            display: false
        },
        tooltips: {
            display: false
        },
        scales: {
            yAxes: [{
               ticks: {
                 display: false
               },
               gridLines: {
                 display: false
               }
            }],
            xAxes: [{
               ticks: {
                 display: false
               },
               gridLines: {
                 display: false
               }
            }],
        }
    }
});

canvas {
  max-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>