score:1
Accepted answer
you can generate custom html legend using legendcallback
together with some css
.
legendcallback: chart => {
let html = '<ul>';
chart.data.datasets.foreach((ds, i) => {
html += '<li>' +
'<span style="width: 36px; height: 14px; background-color:' + ds.backgroundcolor + '; border:' + ds.borderwidth + 'px solid ' + ds.bordercolor + '" onclick="onlegendclicked(event, \'' + i + '\')"> </span>' +
'<span id="legend-label-' + i + '" onclick="onlegendclicked(event, \'' + i + '\')">' +
ds.label + '</span>' +
'</li>';
});
return html + '</ul>';
},
to make this behave the same as standard chart.js charts, the function
onlegendclicked
is invoked when a mouse click occurs on a legend label. this function toggles the hidden state of individual datasets and changes label text style between normal and strike-through.
function onlegendclicked(e, i) {
const hidden = !chart.data.datasets[i].hidden;
chart.data.datasets[i].hidden = hidden;
const legendlabelspan = document.getelementbyid("legend-label-" + i);
legendlabelspan.style.textdecoration = hidden ? 'line-through' : '';
chart.update();
};
please take a look at your amended code and see how it works.
const linechartcolors = ["#000000", "#fd7730", "#ffd35c", "#3fc6f3", "#28a745", "#488cf2", "#4755d3", "#9768c9", "#f2748d", "#f287e7", '#992499', '#6bd69e'];
const legendlabels = ['aug', 'sep', 'oct', 'nov', 'dec', 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul'];
const datapoints = [
[205, 275, 359, 329, 262, 302, 290, 323, 279, 238, 307, 245],
[16, 13, 14, 11, 23, 11, 24, 23, 15, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 53, 0],
[169, 194, 261, 193, 151, 158, 128, 143, 163, 173, 139, 208],
[8, 5, 8, 2, 4, 4, 0, 0, 0, 0, 0, 0],
[0, 0, 19, 36, 7, 35, 27, 30, 13, 0, 0, 0],
[0, 47, 30, 54, 59, 48, 41, 38, 65, 24, 44, 37],
[12, 16, 27, 33, 18, 46, 70, 89, 23, 41, 71, 0]
];
var suppliers = ["total", "starkey", "resound", "widex", "rexton", "unitron", "phonak", "signia"];
function onlegendclicked(e, i) {
const hidden = !chart.data.datasets[i].hidden;
chart.data.datasets[i].hidden = hidden;
const legendlabelspan = document.getelementbyid("legend-label-" + i);
legendlabelspan.style.textdecoration = hidden ? 'line-through' : '';
chart.update();
};
const chart = new chart('mychart', {
type: 'line',
data: {
labels: legendlabels,
datasets: datapoints.map((e, i) => ({
backgroundcolor: linechartcolors[i],
bordercolor: linechartcolors[i],
fill: false,
data: e,
label: suppliers[i],
linetension: 0.2,
}))
},
options: {
legend: {
display: false
},
legendcallback: chart => {
let html = '<ul>';
chart.data.datasets.foreach((ds, i) => {
html += '<li>' +
'<span style="width: 36px; height: 14px; background-color:' + ds.backgroundcolor + '; border:' + ds.borderwidth + 'px solid ' + ds.bordercolor + '" onclick="onlegendclicked(event, \'' + i + '\')"> </span>' +
'<span id="legend-label-' + i + '" onclick="onlegendclicked(event, \'' + i + '\')">' +
ds.label + '</span>' +
'</li>';
});
return html + '</ul>';
},
scales: {
xaxes: [{
scalelabel: {
display: true,
labelstring: 'month'
}
}],
yaxes: [{
ticks: {
beginatzero: true
},
scalelabel: {
display: true,
labelstring: "units sold"
}
}]
},
plugins: {
datalabels: {
display: false
}
}
}
});
document.getelementbyid("legend").innerhtml = chart.generatelegend();
#chart-wrapper {
display: flex;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#legend li {
cursor: pointer;
display: flex;
padding: 0 10px 5px 0;
}
#legend li span {
padding-left: 8px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<div id="chart-wrapper">
<div id="legend"></div>
<canvas id="mychart" height="75"></canvas>
</div>
Source: stackoverflow.com
Related Query
- How can I force my ChartJS canvas legend to stay in a single column?
- How can I move chartJs legend left side and change the width and Hight of the chart?
- How can I add functionality to Chartjs Doughnut chart custom legend
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add label for ChartJs Legend
- How to change the color of legend in chartjs and be able to add one more legend?
- Chart js: how can I align the legend and the title
- How to create custom legend in ChartJS
- How to add ChartJS code in Html2Pdf to view image
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How can I change color of only one column in Barchart using Chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chartjs in Reactjs - how can I update data dynamically?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How do I change axis, title, legend formatting on chartjs template
- How can I load multiple Chartjs charts with different data on the same page?
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How can I implement Polar area charts with Chart.js and Canvas
- how can i reset chartjs object all instances and recreate it from scratch?
- How can I force the ".0" portion of a value to explicitly display (Chart.JS)?
- How to highlight single bar in bar chart using Chartjs
- How can I make small grid lines above ChartJS labels?
- How can I hide legend text if it's zero?
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- how labels in chartjs can make data invisible
- ChartJs how can I move bar into new group?
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How can I show chartjs datalabels only last bar?
- how can i remove the grid lines in chartJs
More Query from same tag
- How to target only X or Y value in jsonObj array
- How can I add an event to chart.js legend?
- Chart.js jQuery dropdown selected values
- Reproduce Error in Chartjs v2 Polar chart not plotting all supplied data
- Determining which chart the user has clicked on
- Chart.js title is not showing
- Updating chart.js bar graph in real time
- How to Sum values from different objects in Django?
- why Graph is not showing until i minimize window. (using chart.js )
- ChartJS Datalabels plugin and negative numbers
- Read google sheet json data into chartjs
- How to remove square label from tooltip and make its information in one line?
- ERROR TypeError: Cannot read property 'nativeElement' of undefined in Ionic 5 and chart.js
- Why i only get one value after executing "for loop" to display "datasets.data" in ChartJS
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- Inserting percentage charts.js doughnut
- ChartJS onclick fill area (Radar Chart)
- Data of same dataset don't have the same color in chartjs
- ChartJS display legend
- Chartjs.org Chart only displaying in one page
- Add shadow Chart.js
- ChartJs works with sharepoint 2016 but not sharepoint 2013
- Use react-icons for pointStyles in Chart.js graph on Next.js app
- Adding data to Chart.js line graph from array
- How can I change only a specific option in a chart with chart.js?
- Object.values not seperated by parentheses / Chartjs only displays first element of array
- i can't alias in Apache permission denied
- chartjs - don't show all x-axis data points, but show all in tooltips
- Chart.js - change the scale background color of Radar type
- React JS Chart JS 2 is not hiding the grid lines in the background