admin 管理员组文章数量: 1086019
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>本文标签： javascriptLegend position with ChartjsStack Overflow
版权声明：本文标题：javascript - Legend position with Chart.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744086217a2531176.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论