Display point style on legend in chart.js

For this chart's first dataset XPData, how do I set the legend style to use the point instead of the line?

I'm hoping all I need to do is add: showLines: false according to the Scatter Line Chart docs, but I can't figure out where to put this setting.

Here is the data set (see fiddle):

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,
};

/*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 < 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 < 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 < 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,
});

<script src=""></script>
<canvas width="400" height="250"></canvas>

3 Answers

use current library

<script src=""></script>

add put

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

inside options and not inside var XPData = {...}

fiddle

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: "#444", borderColor: "#444", pointBorderColor: "#444", pointBackgroundColor: "#444", data: [], showLine: false,
};
// XP Data generation
var total = 0;
for (var i = 0; i < 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 < 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 < 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: { labels: { usePointStyle: true, }, }
};
var data = { datasets: [XPData, XPTrendData, ChillaxLineData, ]
};
var myChart = new Chart(ctx, { type: 'line', data: data, options: options,
});

<script src=""></script>
<canvas width="400" height="250"></canvas>

you should use code like this in ur options:

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

showLine = false, not showLines. Then set border/background colors as usual, and legend should show up.

setPointStyle in options will then change the legend to look like a point.