Chartjs-Add Space Between Bars in Angularjs Chartjs

by

0👍

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],
  ];
});

Leave a comment