Create a rounded bar graph with Angular and chartJS

Question

I would transform my ordinary bar type chart to a rounded thin bars exactly like the photo bellow

I saw many examples suggesting to draw/extend new chart but I don't get how to do it inside angular framework, here's an example.

Here's my actual graph bar :

const ctx = this.myChart.nativeElement.getContext('2d');
this.myChartBis = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: this.labels,
    datasets: [{
      label: 'test',
      showLine: true,
      lineTension: 0,
      data: this.data,
      fill: false,
      pointBorderColor: '#cd0037',
      pointBackgroundColor: '#ffffff',
      borderColor: [
        '#747678',
      ],
      borderWidth: 0
    }
    ],
  },
  options: {
    showLines: true,
    legend: {
      display: false,
    },
    responsive: true,
    maintainAspectRatio: true,
    tooltips: {
      yPadding: -2,
      xPadding: 10,
      footerMarginTop: 5,
      titleFontColor: 'rgba(0, 0, 255, 0.0)',
      displayColors: false,
      borderWidth: 1,
      bodyFontSize: 16,
      bodyFontFamily: 'Avenir',
      backgroundColor: '#FFF',
      borderColor: '#d7d7d7',
      bodyFontColor: '#0088ce',
    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 5,
          display: true,
          autoSkip: false,
          min: 0,
          max: 100,
        }
      }],
      xAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true,
          autoSkip: false,
          callback: (value: any) => {
              return value;
          }
        }
      }]
    }
  }
});

What I expect is a rounded bars like in the photo with an extra condition : id no value print a grey dot ( but the proiority is to make rounded bars )

Answer 1

You can use what you have mentioned already https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts. What you need to do is add both files Chart.roundedBarCharts.js and Chart.roundedBarChart.min.js (just copy them in your project folder, and include them). Then after you have included this, you can use:

var options = {
    cornerRadius: 20,
};

For tiny bars like you have on photo you shoul add barPercentage, then your code will look like:

var options = {
    cornerRadius: 20,
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
};