title: Display point style on legend in chart.js
body: <p><a href="https://jsfiddle.net/43Tesseracts/qmhhc089/" rel="nofollow noreferrer">https://jsfiddle.net/43Tesseracts/qmhhc089/</a></p>
  
  <p>For this chart's first dataset <code>XPData</code>, how do I set the legend style to use the point instead of the line?</p>
  
  <p>I'm hoping all I need to do is add: <code>showLines: false</code> according to the <a href="http://www.chartjs.org/docs/#line-chart-scatter-line-charts" rel="nofollow noreferrer">Scatter Line Chart docs</a>, but I can't figure out where to put this setting.</p>
  
  <p>Here is the data set (see fiddle):</p>
  
  <pre><code>var XPData = {
    label: 'XP Earned',
    //fill: false,
    //backgroundColor: "rgba(0,0,0,0)",
    //borderColor: "rgba(0,0,0,0)",
    pointBorderColor: "#444",
    pointBackgroundColor: "#444",
    data: [],
    showLines: false,
  };
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*jshint esversion: 6 */
  
  var ctx = document.getElementById("myChart");
  
  class DataPoint {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  }
  
  var days = 85;
  var chillax = 72.5;
  
  // XP DATA SET 
  var XPData = {
    label: 'XP Earned',
    //fill: false,
    //backgroundColor: "rgba(0,0,0,0)",
    //borderColor: "rgba(0,0,0,0)",
    pointBorderColor: "#444",
    pointBackgroundColor: "#444",
    data: [],
    showLines: false,
  
    options: {
      legend: {
        labels: {
          usePointStyle: true
        }
      }
    },
  };
  
  // XP Data generation
  var total = 0;
  for (var i = 0; i &lt; 35; i++) {
    total += 10 * Math.floor(Math.random() + 0.5);
    total += 5 * Math.floor(Math.random() + 0.5);
    total += 5 * Math.floor(Math.random() + 0.5);
  
    var p = new DataPoint(i + 1, total);
    XPData.data.push(p);
  }
  
  
  // XP Trend Data     
  var XPTrendData = {
    label: 'XP Trend',
    fill: false,
    pointRadius: 0,
    lineTension: 0,
    borderDash: [5, 5],
    borderColor: "#ccc",
    backgroundColor: "rgba(0,0,0,0)",
    data: [],
  };
  
  // XP Trend calculaion
  var total = 0;
  var days_so_far = XPData.data.length;
  total = XPData.data[days_so_far - 1].y;
  var average_per_day = total / days_so_far;
  
  var trend_total = total;
  for (i = days_so_far; i &lt; days; i++) {
  
    p = new DataPoint(i, trend_total);
    XPTrendData.data.push(p);
    trend_total += average_per_day;
  
  }
  
  // Chillax Line Data Set
  var ChillaxLineData = {
    label: 'Chillax Line',
    pointRadius: 0,
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#337AB7",
    data: [],
  };
  
  // Chill Line Generation
  for (i = 1; i &lt; days; i++) {
    p = new DataPoint(i, Math.floor(i * chillax * 10 / days));
    ChillaxLineData.data.push(p);
  
  }
  
  var options = {
    scaleUse2Y: true,
  
    scales: {
  
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          max: days,
          min: 0,
          stepSize: 5,
        },
        scaleLabel: {
          display: true,
          labelString: 'Days of Class'
        },
      }],
  
      yAxes: [{
          id: "y-axis-XP",
          position: 'right',
          ticks: {
            max: 1000,
            min: 0,
            stepSize: 50,
          },
  
          scaleLabel: {
            display: true,
            labelString: 'XP'
          },
  
          gridLines: {},
        },
        {
          id: "y-axis-percent",
          position: 'left',
  
          ticks: {
            max: 100,
            min: 0,
            stepSize: 5,
          },
  
          scaleLabel: {
            display: true,
            labelString: 'Percent'
          },
  
          gridLines: {
            /*show: true,
            color: "rgba(255, 255, 255, 1)",
            lineWidth: 1,
            drawOnChartArea: true,
            drawTicks: true,
            zeroLineWidth: 1,
            zeroLineColor: "rgba(255,255,255,1)", */
          },
        }
  
  
      ],
    },
  
    title: {
      text: 'A Map of Your Progress',
      display: true,
    },
  
    legend: {
      position: 'top',
    },
  
  };
  
  var data = {
    datasets: [XPData,
      XPTrendData,
      ChillaxLineData,
    ]
  };
  
  var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options,
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="250"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>