CODEWITHSUNDEEP
vue.jschart.jslinechart
newITguy
newITguy

Reputation: 19

Increase gap between line-chart and legend ChartJS

I've been researching for hours trying to figure out this issue. I use ChartJS and trying to build line chart. It seems i have no gap between my chart and its legend, and need to add more space between them.

It should be like this:

this

But i got this (see my code snippet)

Here's my code:

new Chart(document.getElementById("line-chart"), {
        type: "line",
        data: {
          labels: ["Label1", "Label2", "Label3", "Label4"],
          datasets: [
            {
              label: "A",
              fill: false,
              data: [10, 30, 60, 100],
              borderWidth: 1,
              backgroundColor: "red",
              borderColor: "red",
            },
            {
              label: "B",
              fill: false,
              data: [28, 80, 60, 60],
              borderWidth: 1,
              backgroundColor: "green",
              borderColor: "green",
            },
          ],
        },
        options: {
          legend: {
            align: "start",
            position: "right",
            labels: {
              usePointStyle: true,
              fontSize: 10,
            },
          },
          elements: {
            line: {
              tension: 0,
            },
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      });
canvas {
  height: 35vh !important;
  width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>


<head></head>
<body>
  <canvas id="line-chart"></canvas>
</body>

Upvotes: 1

Views: 356

Answers (1)

ellisdod
ellisdod

Reputation: 1744

Depending on where the legend is placed there are some quick fix options available. See this question

For your case and, more often than not, I would recommend generating your own html legend which will give you full control.

You can set this up in the options: 

options: {
   legend: {
       display:false, //turn default legend off
    },
   legendCallback : legendBuilder, //link to your custom function returning html string
}

Define where your legend will go in the html:

<div id="chart-container">
    <canvas id="line-chart"></canvas>
    <div id="chart-legend"></div>
</div>

Then generate your legend:

var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();

working example

Upvotes: 1

Related Questions