CODEWITHSUNDEEP
javascriptchart.js
Enrico
Enrico

Reputation: 6214

Legend position with Chart.js

I'm straggling to position the legend in a chart with Chart.js. Here you have the code.

<script src="https://cdnjs.cloudflare.com/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 combination only",
                        "type": "bar",
                        "stack": null,
                        "backgroundColor": [
                            "#CAA9EB"
                        ],
                        "data": [
                            0.0189,
                            0.0517
                        ],
                        "backgroundColorHover": null
                    },
                    {
                        "label": "Multiple drops only, excluding fixed dose combinations 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 glaucoma",
                        "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?

Upvotes: 1

Views: 15847

Answers (2)

LeeLenalee
LeeLenalee

Reputation: 31371

Few 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
  • backgroundColorHover is not a valid property, you should use the hoverBackgroundColor to define that color, also to make it the same color on hover you shouldnt define it as null but instead define it as the same color.
  • The beginAtZero is 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.com/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 combination only",
            "backgroundColor": [
              "#CAA9EB"
            ],
            "data": [
              0.0189,
              0.0517
            ],
            "hoverBackgroundColor": "#CAA9EB"
          },
          {
            "label": "Multiple drops only, excluding fixed dose combinations 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 glaucoma",
            "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>

Upvotes: 5

depperm
depperm

Reputation: 10746

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.com/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 combination only",
                        "type": "bar",
                        "stack": null,
                        "backgroundColor": [
                            "#CAA9EB"
                        ],
                        "data": [
                            0.0189,
                            0.0517
                        ],
                        "backgroundColorHover": null
                    },
                    {
                        "label": "Multiple drops only, excluding fixed dose combinations 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 glaucoma",
                        "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>

Upvotes: -1

Related Questions