[Chartjs]-Merge scatter and line type with chart.js

by

1👍

✅

You may create a mixed chart. It’s quite natural, the only different thing is to set the type separately for each dataset (and set no type for the chart itself); your line data is compatible with the scatter data as it already has both an x and a y. In the following snippet I replaced your sql code with random scatter data with x in the interval [0, 6] and y in the interval [0, 10].

var lineData = {
    labels: ['Point 1', 'Point 2'],
    datasets: [{
        type: 'line',
        label: 'Line Chart',
        data: [
            {x: 0, y: 0},
            {x: 5, y: 10}
        ],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        lineTension: 0.1
    }]
};

var sqlData = Array.from({length: 100}, ()=>({x: 6*Math.random(), y: 10*Math.random()}));

// Define the data for the scatter chart
var scatterData = {
    datasets: [{
        label: 'Scatter Chart',
        type: 'scatter',
        data: sqlData,
        backgroundColor: 'rgba(75, 192, 192, 0.5)'
    }]
};

var chartOptions = {
    scales: {
        x: {
            type: 'linear',
            position: 'bottom'
        }
    }
};

/*var mixedChart = */new Chart(document.getElementById('mixedChart'), {
    data: {datasets: scatterData.datasets.concat(lineData.datasets)},
    options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div style="height:300px; width:500px">
<canvas id="mixedChart"></canvas>
</div>

Leave a comment