Chart.js pointStyle

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div style="background-color:gray">
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>
<canvas id="myChart3"></canvas>
<canvas id="myChart4"></canvas>
<canvas id="myChart5"></canvas>
</div>

JavaScript

var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'polarArea',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      data: [1,2,3],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(54, 162, 235)'
    }]
  },
  options: {
    title: {
      display: true,
      text: '1. Legend should not have border'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      data: [1,2,3],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 6
    }]
  },
  options: {
    title: {
      display: true,
      text: '2. Legend should have the same border width as the items'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var ctx3 = document.getElementById('myChart3').getContext('2d');
var chart3 = new Chart(ctx3, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      data: [1,2,3],
      backgroundColor: [
      	'rgb(255, 99, 132)',
        'rgb(0, 0, 0)',
        'rgb(0, 0, 0)'
      ],
      borderColor: [
        'rgb(54, 162, 235)',
        'rgb(127, 0, 0)',
        'rgb(127, 0, 0)'
      ],
      borderWidth: [3,6,9],
    }]
  },
  options: {
    title: {
      display: true,
      text: '3. Legend border width and color should be the same as the first item'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var ctx4 = document.getElementById('myChart4').getContext('2d');
var chart4 = new Chart(ctx4, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
    type: 'line',
      data:...