[Chartjs]-Change Chartjs Legend Icon Style

by

27👍

✅

Yes! It is possible.

FIRST

set the usePointStyle property to true for legend­‘s labels, in your chart options, like so :

options: {
      legend: {
         labels: {
            usePointStyle: true
         }
      },
      ...

SECOND

set pointStyle property (as per your requirement) for each of your dataset, as such :

datasets: [{
   ...
   pointStyle: 'line'
}, {
   ...
   pointStyle: 'rect'
}]

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var data = {
   labels: ['Value [mm]', ''],
   datasets: [{
      label: "Hi-Hi Limit",
      type: 'line',
      data: [5432, 5432],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Hi Limit",
      type: 'line',
      data: [5130, 5130],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo Limit",
      type: 'line',
      data: [905, 905],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo-Lo Limit",
      type: 'line',
      data: [604, 604],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      type: 'line',
      label: "Level",
      data: [4800, 4800],
      backgroundColor: 'rgba(0, 119, 220, 1)',
      borderColor: 'rgba(0, 119, 220, 1)',
      borderWidth: 1,
      radius: 0,
      pointStyle: 'rect'
   }],

};

var options = {
   legend: {
      position: 'right',
      labels: {
         usePointStyle: true
      }
   },
   scales: {
      yAxes: [{
         gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
         }
      }],
      xAxes: [{
         gridLines: {
            display: false
         }
      }]
   }
};

Chart.Bar('chart', {
   options: options,
   data: data
});
body {
   background: #1D1F20;
   padding: 16px;
}

.chart-container {
   position: relative;
   margin: auto;
   height: 80vh;
   width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
   <canvas id="chart"></canvas>
</div>

0👍

With recent versions of Chart.js (I’m using 3.5.1), you need to enable this in the options => plugins section of config:

options: {
  plugins: {
    legend: {
      labels: {
        usePointStyle: true
      }
    }
  }
}

Leave a comment