Chart.js pointStyle

by Akihiko Kusanagi

HTML

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

JavaScript

var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: ['1','2','3','4','5','6','7'],
    datasets: [{
      type: 'line',
      data: [1,2,3,4,5,6,7],
      pointStyle: 'rect', //['line','rectRounded','cross','crossRot','star','rect','dash'],
      showLine: false,
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      borderColor: 'rgba(54, 162, 235, 0.5)',
      pointBorderWidth: 10,
      pointRadius: 50,
      borderDash: [4,1]
    }]
  },
  options: {
    title: {
      display: true,
      text: '1. Legend should not have border'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    legend: {
      labels: {
        usePointStyle: 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: [{
  ...