0

I'm using angular 6 and I have a vertical bar chart. I want to make the bar's corners rounded! How can I do it?

Here is part of the code:

.ts

ngAfterViewInit() {

    this.canvas = document.getElementById('barChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'bar',
      data: {
        labels: this.my_labels,
        datasets: [
          {
            label: '',
            fill: false,
            backgroundColor: [
              '#2699fb',
              '#2699fb',
              '#2699fb',
            ],
            borderWidth: 1,
            data: [12000, 18000, 65000],
          }
        ]
      },
      options: {
        responsive: false,
        legend: {
          display: false
        }
      }
    });
}
ProgrammerPer
  • 1,125
  • 1
  • 11
  • 26
fariba.j
  • 1,737
  • 7
  • 23
  • 42
  • does this help? https://stackoverflow.com/questions/43254153/how-to-create-rounded-bars-for-bar-chart-js-v2 – Ray Sep 09 '18 at 09:34
  • @Ray no, I tried it but it doesn't recognize chart.types or chart.elements – fariba.j Sep 09 '18 at 09:40

1 Answers1

0

You can install chartjs-top-round-bar. Go through following steps:-

1. Install the plugin - npm i chartjs-top-round-bar.

2. Import in TS - import 'chartjs-top-round-bar';.

3. Add in the option while creating Chart -


           let myChart = new Chart(this.ctx, { 
                                   type: 'roundedBar', 
                                   data: { 
                                           labels: ['label 1'], 
                                           datasets: [{label: 'Label 1', data}]
                                   }, 
                                   options: { 
                                             barRoundness: 0.3
                                   }
                          }

I hope this helps.

Chetan Oswal
  • 430
  • 9
  • 21