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>

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