Chartjs : showLine depending on value

Question

I have a simple Chartjs line chart.

I want to draw the line if the value in dataset is higher than 10 for example and put

showLine: false

If the value doesn't match the condition.

How can I do that ? There is no information in the doc.

Link to doc

Jsfiddle

Could you be more specific? For values < 10 you just want to show a point and all values >= 10 should be connected by a line? Did I get that right? — wayneOS, May 24 '18 at 13:43
I think then you could use two datasets in your chart. One with values higher then 10 and all others null. And a second one the other way around. The first one with showing line and the other with just dots — wayneOS, May 24 '18 at 14:12

score 0 · Accepted Answer · answered May 24 '18 at 14:27

Here is an example of a Chart with two datasets. The first one is containing all points >10 and null for values smaller than 10. To span the line over the gaps note the spanGaps: true option. The second one is exactly the opposite. Here we hide the line by adding showLine: false.

var ctx = document.getElementById ('myChart').getContext ('2d');
var chart = new Chart (ctx, {
    
    type: 'line',

    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                borderColor: 'rgba(255, 99, 132, 0.5)',
                spanGaps: true,
                data: [12, null, 15, 20, null, 30, null],
            },
            {
                label: "My second dataset",
                backgroundColor: 'rgba(135, 99, 225, 1)',
                borderColor: 'rgba(135, 99, 225, 1)',
                showLine: false,
                data: [null, 9, null, null, 8, null, 7],
            }
        ]
    },

    options: {}
    
});

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

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

Chartjs : showLine depending on value

1 Answers1