CODEWITHSUNDEEP
reactjschart.jsreact-chartjs
lukemccrae
lukemccrae

Reputation: 13

React chart2js Line chart with multiple datasets overlapping

chart

const data = {
    labels: Array(coordinates.length).fill("l"),
    datasets: buildDataset(),
    options: {
        animation: false,
        scales: {
            // ???????
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
               label: function(tooltipItem) {
                      return tooltipItem.yLabel;
               }
            }
        },
        maintainAspectRatio: false,
        scales: {
            myScale: {
                position: 'left',
            }
        },
        elements: {
            point:{
                radius: 0
            }
        }
    }
}
return (
        <Chart>
            <Line
            data={data}
            width={50}
            height={20}
            options={data.options}>
            </Line>
        </Chart>
)

// ~~~~~

     let obj = {
        label: stops[0].miles == 0 ? index : index + 1,
        data: points,
        backgroundColor: colors[index],
        tension: 0.4,
        fill: true
    }

These charts are built from an array of obj objects. The points variable that data refers is an array of object like: [{x: 0, y: 10257}, {x: 1, y: 10245}]

How do I get my line chart to display these different datasets side by side? I assume it has something to do with the scales parameter but wasn't able to find anything that worked in the docs.

Thanks!

Upvotes: 1

Views: 1815

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31361

For the object notation to work chart.js needs values to plot them against (not the index in the array) so you cant just provide an array containing only the value l.

You can either provide a labels array containing increasing numbers to which you match it or remove it and set your x scale to linear.

Labels example:

var options = {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3],
    datasets: [{
        label: '# of Votes',
        data: [{
          x: 0,
          y: 4
        }, {
          x: 1,
          y: 6
        }, {
          x: 2,
          y: 2
        }],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 2,
          y: 2
        }, {
          x: 3,
          y: 3
        }],
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {}
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Linear example:

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
          x: 0,
          y: 4
        }, {
          x: 1,
          y: 6
        }, {
          x: 2,
          y: 2
        }],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 2,
          y: 2
        }, {
          x: 3,
          y: 3
        }],
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Upvotes: 1

Related Questions