I'm straggling to position the legend in a chart with Chart.js. Here you have the code.
<script src=".js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop bination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose binations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaua",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>I'm straggling to position the legend in a chart with Chart.js. Here you have the code.
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop bination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose binations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaua",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>Although I'm following the documentation, I have the legend only at the top of the graph.
How can I put the legend on the right?
Share Improve this question asked Oct 15, 2021 at 15:01 EnricoEnrico 6,34611 gold badges79 silver badges179 bronze badges 2- 2 You shouldnt follow documentation of a forked repo, please use the official documentation: chartjs/docs/latest – LeeLenalee Commented Oct 15, 2021 at 15:30
- or from the orginial repo – depperm Commented Oct 15, 2021 at 17:14
2 Answers
Reset to default 5Few things wrong with your code:
- Legend namespace was in v2 place instead of v3, in v3 it has been moved to
options.plugins.legend - Scales where defined as arrays which is v2 syntax, in v3 all scales are their own object where the scale ID is the object key
backgroundColorHoveris not a valid property, you should use thehoverBackgroundColorto define that color, also to make it the same color on hover you shouldnt define it asnullbut instead define it as the same color.- The
beginAtZerois not defined in the ticks but on the root of the scale now, but since it does nothing on a category scale I have removed it.
For all changes between v2 and v3 you can read the migration guide
Since scale config now works to make it more clean you can remove all the unecesarry stacks in each dataset, also you dont have to specify that its a bar dataset since the default type takes care of that. You only need to specify it if you are deviating from it.
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [{
"label": "1 drop only: 1 active ingredient only",
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"hoverBackgroundColor": "#A76FDE"
},
{
"label": "1 fixed dose drop bination only",
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"hoverBackgroundColor": "#CAA9EB"
},
{
"label": "Multiple drops only, excluding fixed dose binations only",
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"hoverBackgroundColor": "#B4C12F"
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"hoverBackgroundColor": "#002060"
},
{
"label": "Other laser treatments for glaua",
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"hoverBackgroundColor": "#009999"
},
{
"label": "MIGS",
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"hoverBackgroundColor": "#DA1884"
},
{
"label": "Traditional incisional surgery",
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"hoverBackgroundColor": "#FDC741"
}
]
},
"options": {
"scales": {
"x": {
"stacked": true,
"ticks": {
"maxRotation": 0,
"minRotation": 0
}
},
"y": {
"stacked": true
}
},
"responsive": true,
"plugins": {
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>You need to wrap legend inside of plugins see example (click the actions tab to see how they adjust the legend position) or this example where it is explicitly written in the config
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop bination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose binations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaua",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"plugins": {
"legend": {
"align": "start",
"position": "right"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>