Click here to Skip to main content
14,638,468 members
Rate this:
Please Sign up or sign in to vote.
Hi,

I need to display multiple lines of data on a javascript chart. I successfully display the chart, but for some reason the label just isn't displaying.

I have tried multiple examples but I don't find exactly what I need to do.

What I have tried:

<head>
<script>var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Data"
                },
                data: [
                    {
                        label: "Name1",
                        type: "line",
                        dataPoints: [
                            { x: 10, y: 21 },
                            { x: 11, y: 25 },
                            { x: 12, y: 30 }


                        ]
                    },
                    {
                        label: "Name2",
                        type: "line",
                        dataPoints: [
                            { x: 10, y: 31 },
                            { x: 11, y: 20 },
                            { x: 12, y: 15 }

                        ]
                    }
                ]
            });
            chart.render();</script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
Posted
Updated 2-Aug-20 21:41pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I see the following works fine:
var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Reference: Chart.js - displaying multiple line charts using multiple labels - Stack Overflow[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100