Coloring some points of a graph differently

Question

I have some data to represent graphically with Chartjs and Laravel but I would like to make some of these data to be colored differently because they are not in a certain range. How can I do this?

This is my code for creating chart

<div>
  <canvas id="myChart" width="400" height="200"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@php
    $labels = $time_array;
    $data = $rssi_array;
@endphp

{{-- Setting JS variables from PHP --}}
<script>
    const labels = {!! json_encode($labels) !!};
    const data = {!! json_encode($data) !!};
</script>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                spanGaps: true,
                label: 'RSSI through time',
                data: data,
                backgroundColor: [
                    'rgba(0, 0, 0, 1)'
                ],
                borderColor: [
                    'rgba(0, 0, 0, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    title: {
                    color: 'black',
                    display: true,
                    text: 'Time'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        color: 'black',
                        display: true,
                        text: 'RSSI Value'
                    }
                }
            }
        }
    });
</script>

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

And this is the chart

Thanks in advance

Answer 1

Add pointBackgroundColor to fill color for points, and pointBorderColor for border color.

options: {
    pointBackgroundColor: '#333', // <-- your awesome color
    pointBorderColor: '#333',     // <-- your awesome color
    responsive: true,
    scales: {
        x: {
            title: {
            color: 'black',
            display: true,
            text: 'Time'
            }
        },
        y: {
            beginAtZero: true,
            title: {
                color: 'black',
                display: true,
                text: 'RSSI Value'
            }
        }
    }
}

• Demo here..
• Docs

---

Update (multi color points)

You can set colors :

const colors = dataJson.map(function(value){
  return (value < 50) ? "rgba(255,0,0,1)" : "rgba(0,255,0,1)";
});

Full demo :

const labels = ["January", "February", "March", "April", "May", "June"];
const dataJson = [10, 60, 55, 20, 70, 30, 45];
const colors = dataJson.map(function(value){
  return (value < 50) ? "rgba(255,0,0,1)" : "rgba(0,255,0,1)";
});

const data = {
  labels: labels,
  datasets: [
    {
      label: "My First dataset",
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      pointBackgroundColor: colors,
      pointBorderColor: colors,
      data: dataJson
    }
  ]
};

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

const myChart = new Chart(document.getElementById("myChart"), config);

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