Chart.js pointStyle

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.1.0/chartjs-plugin-colorschemes.min.js"></script>
<div style="width: 600px"><canvas id="mac-chrome"></canvas></div>
<div style="width: 600px"><canvas id="mac-firefox"></canvas></div>
<div style="width: 600px"><canvas id="mac-safari"></canvas></div>
<div style="width: 600px"><canvas id="win-chrome"></canvas></div>
<div style="width: 600px"><canvas id="win-firefox"></canvas></div>
<div style="width: 600px"><canvas id="win-ie"></canvas></div>
<div style="width: 600px"><canvas id="win-edge"></canvas></div>

JavaScript

var ctx1 = document.getElementById('mac-chrome').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: [
      'circle',
      'triangle',
      'rectRounded',
      'rect',
      'rectRot',
      'crossRot',
      'cross',
      'star',
      'line',
      'dash'
    ],
    datasets: [{
      label: 'v2.7.3',
      data: [
        472.935,
        373.003,
        821.183,
        307.363,
        387.949,
        478.551,
        489.936,
        521.784,
        275.794,
        276.930
      ]
    }, {
      label: 'This PR',
      data: [
        271.322,
        215.898,
        321.080,
        164.703,
        211.166,
        298.265,
        301.155,
        339.047,
        145.995,
        144.730
			]
    }, {
      label: 'v2.7.3 (10° rotation)',
      data: [
        486.697,
        390.402,
        844.014,
        374.864,
        396.469,
        500.704,
        515.413,
        541.030,
        298.398,
        290.218
  		],
    }, {
      label: 'This PR (10° rotation)',
      data: [
        276.281,
        214.229,
        545.281,
        212.466,
        213.433,
        299.759,
        297.248,
        341.636,
        144.134,
        143.104
      ]
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Mac OS 10.14 / Chrome 70.0.3538.102'
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Time (ms) - Lower is better'
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

var ctx2 = document.getElementById('mac-firefox').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: [
      'circle',
      'triangle',
      'rectRounded',
      'rect',
      'rectRot',
      'crossRot',
      'cross',
      'star',
      'line',
      'dash'
    ],
    datasets: [{
      label: 'v2.7.3',
      data: [
        1881,
        892,
        1155,
        497,
        723,
   ...