title: how to give custom design (icons) for point Style of chart js legends?
body: <p>I have a chart which designed based on a mock-up but the the mock-up chart has used custom icons for legends pointStyles which basically i couldn't find them in chart JS itself, i tried different classes of pointStyle like ('rect', 'clearRect') but it all have different styles. so basically my question is how can we give custom icons/design for charts pointStyle.</p>
  
  <p><strong>Mockup chart:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/WgOgO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WgOgO.png" alt="enter image description here"></a></p>
  
  <p><strong>My chart:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Ms4PS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ms4PS.png" alt="enter image description here"></a></p>
  
  <p><strong>My Chart JS:</strong></p>
  
  <pre><code>new Chart(document.getElementById("report-chart"), {
      type: 'line',
      data: {
          labels: chartData.label,
          datasets: [{
              label: 'FMV INSTALLED',
              data: chartData.data.fmvI,
              borderColor: "#69bd45",
              fill: false,
              borderWidth: 2,
              pointStyle: 'clearRect'
  
          }, {
              label: 'EXCHANGE',
              data: chartData.data.fmv,
              borderColor: "#f18e35",
              borderDash: [2, 2],
              fill: false,
              pointStyle: 'rect'
  
          }, {
              label: 'ORDERLY',
              data: chartData.data.olv,
              borderColor: "#a62061",
              fill: false,
              // borderWidth: 20,
          }, {
              label: 'FORCED',
              data: chartData.data.flv,
              borderColor: "#64cdf3",
              fill: false,
              borderWidth: 1,
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      // Include a dollar sign in the ticks
                      callback: function(value, index, values) {
                          return '$' + value;
                      }
                  }
              }],
              xAxes: [{
                  position: 'top'
              }]
          },
          legend: {
              display: true,
              position: 'bottom',
              labels: {
                  useLineStyle: true,
                  usePointStyle: true
              }
          },
      }
  });
  </code></pre>