Search code examples
javascripthtmlchart.jslegendlegend-properties

How to convert a bar legend to line legend in chart.js 2.7.2?

I am trying to create a line graph using chart.js v2.7.2 and here is what it looks like: enter image description here

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};


const config = {
  type: 'line',
  data: data,
};

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

    
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
</html>

Here is my code on JS Bin: https://jsbin.com/kegedewiyi/edit?html,js,output

I want the legend to be converted to a line instead of a bar.

Solution

  • I figured it out.

    I just had to use pointStyle.

    Here is the new chart image:

    enter image description here

    Here is the code:

    const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
    pointStyle: "line",
  }]
};


const config = {
  type: 'line',
  data: data,
  options: {
    legend: {
      labels: {
        usePointStyle: true,
      }
    },
  }
};

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>


<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
</html>

    And here is the code on JS Bin: https://jsbin.com/lolajokujo/edit?html,js,output