chart.js combine scatter and line

user_2906157 0
Viewed 1170

I'm new to chart.js and I'm trying to combine a scatter chart with a line chart.

I've been struggling with 2 problems:

1.- I've managed to draw the scatter chart, however the line chart is not displayed. No error message is thrown.

2.- I want to add some labels at the bottom but after many approaches the chart only shows the numbers at the x axis.

I'm attaching an image so you can see where am I right now. I drew the line chart manually.

This is the code I'm using:

<script>
const ctx = document.getElementById('myChart');

Chart.defaults.elements.point.pointStyle = 'dash';
Chart.defaults.elements.point.borderWidth = 2;
Chart.defaults.elements.point.radius = 12;

const labels1 = ['A', 'B','C','T','GW','RT','MJ','JY','YJ','TR','UY','IY','TR','RE','WE','WE','WE','BV','CS', 'EW'];

const data1 = {
    datasets: [
        {
        type: 'line',
        label: 'Line Dataset',
        data: [10, 10, 10, 10],
        backgroundColor: 'rgb(0, 0, 255)',
        borderColor: 'rgb(0, 0, 255)'
        },
        {
        type: 'scatter',
        backgroundColor: 'rgb(0, 0, 0)',
        borderColor: 'rgb(255, 0, 0)',
        data: [{x:1, y:36}, {x:1, y:37}, {x:1, y:40}, {x:1, y:40}, //.... and many more!!
        }

    ],

};


const myChart = new Chart(ctx, {
    type: 'scatter',
    data: data1,
    labels: labels1,
    options: {
        scales: {
            x: {
                min: 0,
                max: 19,
                ticks: {stepSize: 1}
            },
            y: {
                min: 20,
                max: 120,
                ticks: {stepSize: 10},
                grid:{display:false}
            },
        }
    }
});

</script>

I've tried placing the labels: labels1 at many places but they're never shown. The line chart is not shown either as you can see in the attached image.

Chart.js Version is 3.6.2

Any help will be really appreciated.

Best regards!!

chart

chart.js charts javascript
1 Answers

This is because a scatter chart uses linear axis for the x axis by default and a line chart uses a category axis, these are not compatibale with each other so you will need to use a second X axis. Also your labels array is in the wrong place, it is supposed to be in the data part of the config:

const labels1 = ['A', 'B', 'C', 'T', 'GW', 'RT', 'MJ', 'JY', 'YJ', 'TR', 'UY', 'IY', 'TR', 'RE', 'WE', 'WE', 'WE', 'BV', 'CS', 'EW'];

const data1 = {
  labels: labels1, // place labels array in correct spot
  datasets: [{
      type: 'line',
      label: 'Line Dataset',
      data: [10, 10, 10, 10],
      backgroundColor: 'rgb(0, 0, 255)',
      borderColor: 'rgb(0, 0, 255)',
      xAxisID: 'x2' // Specify to which axes to link
    },
    {
      type: 'scatter',
      backgroundColor: 'rgb(0, 0, 0)',
      borderColor: 'rgb(255, 0, 0)',
      data: [{
        x: 1,
        y: 36
      }, {
        x: 1,
        y: 37
      }, {
        x: 1,
        y: 40
      }, {
        x: 1,
        y: 40
      }]
    }
  ],
}


const myChart = new Chart('chartJSContainer', {
  type: 'scatter',
  data: data1,
  options: {
    scales: {
      x: {
        min: 0,
        max: 19,
        ticks: {
          stepSize: 1
        }
      },
      x2: { // add extra axes
        position: 'bottom',
        type: 'category'
      },
      y: {
        min: 0,
        max: 120,
        ticks: {
          stepSize: 10
        },
        grid: {
          display: false
        }
      },
    }
  }
});
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

user_86829830
Related