Login/Register
Border radius for the bar chart in ChartJS
Asked Answered
javascriptcssangularjschart.jsng2-charts
C

1

7

I am creating a stacked bar chart using ng2-chart which is the Angular-2 version of ChartJs .

I am trying to create bar chart with border- radius as mentioned in the attached image, but unable to find the option to achieve this,

please suggest me some way to get this.

My code:

public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: false,
    scales: {
      xAxes: [{
        stacked: true
      }],
      maxBarThickness: 5,
      yAxes: [{
        stacked: true
      }],

    },
    barThickness:20,
    legend: {
      display: true,
      position: 'right',
      labels: {
          fontColor: '#fff'
      }
  }

  };



<canvas baseChart style="height:350px; width:1150px;" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
[colors]="lineChartColors" [chartType]="barChartType">
 </canvas>

enter image description here

Cathay answered 11/10, 2017 at 12:58 Comment(3)
Might be related to this question -- #43254653 . Not sure if it would be the same with ng2-chart – Brainless
Did you found any solution? – Stagger
did you got any solution ? – Craniometry
E
1

Using version 3 of chart.js you can easily configure this with the borderRadius property. At the time of writing this answer you will need to install the next branch of ng2-charts since its in its 7'th release candidate for using v3 of chart.js

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink',
      borderRadius: Number.MAX_VALUE,
      borderSkipped: false,
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
Endothelium answered 25/10, 2021 at 13:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.