score:24

Accepted answer

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>

score: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
      }
    }
  }
}

Related Query

More Query from same tag