Bar size with borderWidth

after

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container">
  <div class="chart-container">
    <canvas id="myChart1"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart2"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart3"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart4"></canvas>
  </div>
  <button id="randomizeData">Randomize Data</button>

  <script>
    window.chartColors = {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(231,233,237)'
    };

    window.randomScalingFactor = function() {
      return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }

  </script>

CSS

.chart-container {
         width: 500px;
         margin-left: 40px;
         margin-right: 40px;
         margin-bottom: 40px;
       }
       
       .container {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
       }

JavaScript

// Chart.defaults.global.animation.duration = 1000;
//Chart.defaults.global.animation.easing = 'easeInOutQuad';

// Chart.defaults.global.elements.rectangle.borderSkipped = 'left';

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var color = Chart.helpers.color;

var data = [
  1, -1,
  0.1, -0.1,
  0
];

var data_barRandom = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [{
    label: 'Dataset 1',
    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
    borderColor: window.chartColors.red,
    // borderWidth: 3,
    data: data
  }, {
    label: 'Dataset 2',
    backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
    borderColor: window.chartColors.orange,
    borderWidth: 5,
    data: data
  }, {
    label: 'Dataset 2',
    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
    borderColor: window.chartColors.blue,
    borderWidth: 20,
    data: data
  }]

};

var config_bar = {
  type: 'bar',
  data: data_barRandom,
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Bar'
    },
    scales: {
      xAxes: [{
        display: true,
        // ticks: {
        // 	min: "March",
        // 	max: "August",
        // },
        // categoryPercentage: 1,
        // barPercentage: 1,
      }],
      yAxes: [{
        // ticks: {
        // 	min: -50,
        // 	max: 50,
        // },
        gridLines: {
          // drawOnChartArea : false,
        }
      }]

    },
    elements: {
      rectangle: {
        //borderSkipped: 'right'
      }
    },
  }
};

var config_horizontalBar = {
  type: 'horizontalBar',
  data: data_barRandom,
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'horizontal Bar'
    },
    scales: {
      yAxes: [{
      ...