score:1
you can use html to create your custom legend. here is an example of how to creating a custom legend with custom title(and custom user interface).
function legendclickcallback(event) {
event = event || window.event;
var target = event.target || event.srcelement;
while (target.nodename !== 'li') {
target = target.parentelement;
}
var parent = target.parentelement;
var chartid = parseint(parent.classlist[0].split("-")[0], 10);
var chart = chart.instances[chartid];
var index = array.prototype.slice.call(parent.children).indexof(target);
var meta = chart.getdatasetmeta(index);
if (meta.hidden === null) {
meta.hidden = !chart.data.datasets[index].hidden;
target.classlist.add('hidden');
} else {
target.classlist.remove('hidden');
meta.hidden = null;
}
chart.update();
}
var ctx = document.getelementbyid("mychart");
var mylegendcontainer = document.getelementbyid("mychartlegend");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["values #1", "values #2"],
datasets: [
{
label: "one",
backgroundcolor: "red",
data: [26,36]
},
{
label: "two",
backgroundcolor: "blue",
data: [34, 40]
}
]
},
options: {
legend: {
display: false
},
scales: {
yaxes: [{
ticks: {
beginatzero:true
}
}]
}
}
});
mylegendcontainer.innerhtml = mychart.generatelegend();
var legenditems = mylegendcontainer.getelementsbytagname('li');
for (var i = 0; i < legenditems.length; i += 1) {
legenditems[i].addeventlistener("click", legendclickcallback, false);
}
.mychartdiv {
max-width: 600px;
max-height: 400px;
}
[class="0-legend"] {
cursor: pointer;
list-style: none;
padding-left: 0;
}
[class="0-legend"] li {
display: inline-block;
padding: 0 5px;
}
[class="0-legend"] li.hidden {
text-decoration: line-through;
}
[class="0-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10px;
}
.legend-box{
border-color: gray;
border-style: dashed;
margin-top: 25px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/chart.bundle.min.js"></script>
<html>
<body>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
<div class='legend-box'>
<span>chart legend</span>
<div id="mychartlegend"></div>
</div>
</div>
</body>
</html>
i used the code of this example to create above example
score:1
you can override default legend option to generate your own legends. with this approach, however, you cannot style the label you are adding on top of the legends.
p.s: i'm using same example used by user pooyan.
var ctx = document.getelementbyid("mychart");
var mylegendcontainer = document.getelementbyid("legends");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["values #1", "values #2"],
datasets: [
{
label: "one",
backgroundcolor: "red",
data: [26,36]
},
{
label: "two",
backgroundcolor: "blue",
data: [34, 40]
}
]
},
options: {
legend: {
position: 'left',
labels : {
generatelabels: function(chart){
var data = chart.data;
var legends = array.isarray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label,
fillstyle: (!array.isarray(dataset.backgroundcolor) ? dataset.backgroundcolor : dataset.backgroundcolor[0]),
hidden: !chart.isdatasetvisible(i),
linecap: dataset.bordercapstyle,
linedash: dataset.borderdash,
linedashoffset: dataset.borderdashoffset,
linejoin: dataset.borderjoinstyle,
linewidth: dataset.borderwidth,
strokestyle: dataset.bordercolor,
pointstyle: dataset.pointstyle,
// below is extra data used for toggling the datasets
datasetindex: i
};
}, this) : [];
var title = {
text: 'my cool label',
strokestyle: 'transparent',
fillstyle: 'transparent',
linewidth: 0
};
legends.unshift(title);
return legends;
}
}
},
scales: {
yaxes: [{
ticks: {
beginatzero:true
}
}]
},
}
});
<script src="https://npmcdn.com/chart.js@2.7.2/dist/chart.bundle.min.js"></script>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
score:1
you can do that by using filltext() above the legend after having drawn the chart.
by example, use the plugin afterdatasetsdraw (or another) and draw the title up to the position of first element of the legend (use legendhitboxes[0]).
in the plugin section :
return {afterdatasetsdraw: function(chartinstance, easing) {
//onprogress: function (animation) {
//var chartinstance = this.chart;
var ctx = chartinstance.ctx;
ctx.textalign = 'center';
// ctx.fillstyle = "rgba(255, 243, 243)";
ctx.textbaseline = 'middle';
// ajout d'un titre de légende
var titrelegendex = chartinstance.legend.legendhitboxes[0].left + 50;
var titrelegendey = chartinstance.legend.legendhitboxes[0].top-20;
ctx.fillstyle = "#000000";
ctx.font = "bold 12px verdana, sans-serif";
ctx.filltext("titre de légende", titrelegendex, titrelegendey);
example here to adapt for donut chart
Source: stackoverflow.com
Related Query
- How to add label for ChartJs Legend
- How to add the value for each label to pie legend
- How to change the color of legend in chartjs and be able to add one more legend?
- How to get onClick Event for a Label in ChartJS and React?
- How to add ChartJS code in Html2Pdf to view image
- How to add label in chart.js for polar chart area
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- How to add additional label in the middle of each bar using ChartJS
- ChartJS - How to add Text between Pie Chart and Legend
- how to add extra label at zero levels in x-axis in chartjs
- How to dynamically update Chartjs legend label colors?
- How can I add functionality to Chartjs Doughnut chart custom legend
- How to add dataset legend in chartjs tooltip
- How can I add vertical line and label for each point in Chart.js?
- How to disable a tooltip for a specific dataset in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- show label in tooltip but not in x axis for chartjs line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- how to always show label in chartjs without mouseover?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
- How to set a full length background color for each bar in chartjs bar
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- PrimeNg bar chart how to show a label for the y-axis
- How to create custom legend in ChartJS
- How can I force my ChartJS canvas legend to stay in a single column?
- How to add background color between two lines in yAxis Chartjs
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- How to remove bars for those bars with zero value in Chartjs bar chart?
More Query from same tag
- Using map reduce in javascript
- Error says Chart is not defined
- How can i iterate or get all object out of array with object key in Chart.js
- Why my ChartJs only Coloring one section?
- ChartJS: get points information on hovering the points
- unable to add background color to the canvas using jspdf and chartjs
- ChartJs + ie11 doesn't work
- break y axis in line chart chart.js
- Chartjs inner separation
- Chartjs Nested Doughnut Layers With Different Thickness
- Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100%
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- how to align count text center in horizontal bar in the Chart.js?
- Passing Json using JsonResult not working properly
- how labels in chartjs can make data invisible
- Chart in Angular not displayed until windows resize
- Scatter plot not showing anything chartjs needs some debugging
- Chart.js load new data
- Emberjs binding properties within Ember object
- how to show data label on barchart using chart.js in Angular10 project?
- Dynamically set data on Angular-chart.js
- Charts.js polar area scales
- ReactJs: componentWillReceiveProps doesn't get called for component whose redux action gets dispatched last
- Use of ng-class with Chart.js
- Charts .js update when array changes
- Chart.js point format data for a scatter plot
- Horizontal Bar-Chart - angular-chart.js
- Chart JS not displaying graph
- Update/re-render Charts.js in Angular 4
- How to export/import modules between component files in Javascript