borderdash options in chart js changes my legend - chart.js

Question

I added borderdash to my chart to make make the line more distinct but it alter the shape of my legend. I want it to be an square, not that weird rectangle shape in the legend. I have no idea how to fix this. Does anyone know of an solution to this?
Here is my chart js options:
var options = {
responsive: true,
maintainAspectRatio: false,
backgroundColor: "#fffffff",
title: {
display: true,
text: title,
fontSize: 24
},
legend: {
display: true
},
tooltips: {
callbacks: {
label: function(tooltipItem, ctx) {
var label;
if(x_axis == "Temperature [K]")
{
label = [["Pressure: " + tooltipItem.yLabel], ["Temperature: " + tooltipItem.xLabel]];
}
else
{
label = [["Pressure: " + tooltipItem.yLabel], ["Abundance: " + tooltipItem.xLabel]];
}
return label;
},
}
},
animation: {
duration: 1 // general animation time
},
scales: {
xAxes: [{
type: x_type,
display: true,
ticks: {
beginAtZero: false,
autoSkip: false,
fontSize: 20,
suggestedMin: x_min,
suggestddMax: x_max,
callback: function(value, index, values) {
if (x_axis == "Abundance"){
if (value == 1e-9)
{
return 1 + "n";
}
else if(value == 1e-8)
{
return 10 + "n";
}
else if(value == 1e-7)
{
return 100 + "n";
}
else if (value == 1e-6){
return 1 + "\u03BC";
}
else if (value == 1e-5)
{
return 10 + "\u03BC";
}
else if(value == 1e-4)
{
return 100 + "\u03BC";
}
else if (value == .001 || value == .01 || value == .1 || value == 1){
return value;
}
}
else if (x_axis == "Temperature [K]")
{
return value;
}
}
},
scaleLabel: {
labelString: x_axis,
display: true,
fontSize: 20,
fontColor: "Black",
}
}],
yAxes: [{
type: 'logarithmic',
display: true,
ticks: {
reverse: true,
beginAtZero: false,
autoSkip: false,
min: 1e-6,
max: 1,
steps: 6,
fontSize: 20,
callback: function(value, index, values) {
// y_log_ticks = [1e-6, 1e-5, 1e-4, 1e-3, 1e-2, 1e-1, 1]
if (value == 1e-6){
return 1 + "\u03BC";
}
else if (value == 1e-5)
{
return 10 + "\u03BC";
}
else if(value == 1e-4)
{
return 100 + "\u03BC";
}
else if (value == .001 || value == .01 || value == .1 || value == 1){
return value;
}
}
},
scaleLabel:{
display: true,
labelString: y_axis,
diplay: true,
fontSize: 20,
fontColor: "Black"}
}]
}
}
And here is how I am adding the data with the borderdash:
function update_plot(json){
line_patter = [[1,1], [10, 10], [20, 5], [15, 3, 3, 3], [20, 3, 3, 3, 3, 3, 3, 3], [12, 3, 3]];
counter++;
chart1.data.datasets.unshift({
data: json.temp_pressure,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter,
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart1.data.datasets.length),
backgroundColor: getLineColor(chart1.data.datasets.length),
});
chart2.data.datasets.unshift({
data: json.fh2o,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter + ": H2O",
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart2.data.datasets.length),
backgroundColor: getLineColor(chart2.data.datasets.length),
});
chart2.data.datasets.unshift({
data: json.fo3,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter + ": O3",
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart2.data.datasets.length),
backgroundColor: getLineColor(chart2.data.datasets.length),
});
chart1.update();
chart2.update();
}

Answer 1

You need to provide your own Legend Label Configuration by defining legend.labels.generateLabels inside chart options.
In the following code sample, generateLabels creates an array of objects that implement the Legend Item Interface. Each object simply takes its properties from the corresponding dataset but leaves lineDash undefined.
new Chart(document.getElementById('myChartAxis'), {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [
{
label: 'WARNINGS',
data: [0, 2, 3, 2],
borderDash: [5],
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.2)',
fill: false
},
{
label: 'ERRORS',
data: [1, 1, 4, 3],
borderDash: [2],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: false
}
]
},
options: {
legend: {
labels: {
generateLabels: chart => chart.data.datasets.map((dataset, i) => ({
datasetIndex: i,
text: dataset.label,
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor
}))
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChartAxis" height="90"></canvas>