Add Space Between Bars in Angularjs Chartjs

Question

I am using Angularjs Chartjs https://jtblin.github.io/angular-chart.js/,

Js Code

$scope.options = {
    cornerRadius: 20,
    scales: {
        yAxes: [{
                gridLines: {
                    display: false
                }
            }],
        xAxes: [{
                stacked: false,
                barThickness: 11,
                barPercentage: 2.0,
                gridLines: {
                    display: false
                },
                ticks: {
                    minRotation: 20
                }
            }
        ]
    }
};
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B', 'Series C'];

$scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90],
    [30, 80, 19, 86, 40, 56, 90]
];

And In HTML

<div class="row">
            <div class="col-md-12">
                <canvas id="bar" class="chart chart-bar" chart-data="data" 
                        chart-labels="labels" chart-series="series" chart-options="options"
                        chart-dataset-override="colors">
                </canvas>
            </div>
        </div>

Now I want to Make Space between the bar and make 3 fixed colors and also border-radius from both sides of the bar. I am not able to add images. Thank You for Your Precious Time.

Answer 1

Try using the .setOptions for global colours of the bars, and xAxes.barThickness for the spacing of bars.

var app = angular.module('app', ['chart.js', 'ngRoute']);

app.config(function ($routeProvider, ChartJsProvider) {
  $routeProvider.when('/', {
    templateUrl: 'bars.html',
    controller: 'MainCtrl',
  });
  ChartJsProvider.setOptions({
    chartColors: ['#ff0000', '#00ff00', '#0000ff'],
  });
});

app.controller('MainCtrl', function ($scope) {
  $scope.options = {
    cornerRadius: 20,
    scales: {
      yAxes: [
        {
          gridLines: {
            display: false,
          },
        },
      ],
      xAxes: [
        {
          stacked: false,
          barThickness: 20,
          borderWidth:10,
          barPercentage: 2.0,
          gridLines: {
            display: false,
          },
          ticks: {
            minRotation: 20,
          },
        },
      ],
    },
  };
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B', 'Series C'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90],
    [30, 80, 19, 86, 40, 56, 90],
  ];
});