CODEWITHSUNDEEP
chart.js
Doomic
Doomic

Reputation: 357

How do I hide line outside the min/max (scale area) in chartjs 2.0?

How can i hide the line (in chartjs 2.x) as soon it goes outside the scale boundries?

i came across this question/answer: How do I hide values past the x-axis in chartjs 2.0? There they will filter all points outside the scale boundries. But that will only work if you have a point on the min/max, and the curve of the line (if any) will not be correct. In my situation there isn't always a point for the min and/or max and line is also curved. I have a situation like this jsfiddle: https://jsfiddle.net/gyotsv07/1/

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="/js/lib/dummy.js"></script>  
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
</head>
<body><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe>
  <canvas id="canvas" height="566" style="display: block; width: 849px; height: 566px;" width="849"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
/*
var cleanOutPlugin = {
    beforeInit: function(chart) {
        // Replace `ticks.min` by `time.min` if time-type chart
        var min = chart.config.options.scales.xAxes[0].ticks.min;
        // Same here with `ticks.max`
        var max = chart.config.options.scales.xAxes[0].ticks.max;
        var ticks = chart.config.data.labels;
        var idxMin = ticks.indexOf(min);
        var idxMax = ticks.indexOf(max);

        if (idxMin == -1 || idxMax == -1)
            return;

        var data = chart.config.data.datasets[0].data;

        data.splice(idxMax + 1, ticks.length - idxMax);
        data.splice(0, idxMin);
        ticks.splice(idxMax + 1, ticks.length - idxMax);
        ticks.splice(0, idxMin);
    }
};

Chart.pluginService.register(cleanOutPlugin);*/
var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 6
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
                ticks: {
                    min: -5,
                  max: 5
                }
            }]
        }
    }
});
</script>
</body></html>

is there a solution to prevent drawing outside the scale boundries?

Upvotes: 1

Views: 1649

Answers (1)

tektiv
tektiv

Reputation: 14187

A quick fix to your issue is to remove everything drawn outside of the chart surface.

The following plugin can help you doing it :

Chart.plugins.register({
    beforeDatasetsDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;
        var chartArea = chartInstance.chartArea;
        ctx.save();
        ctx.beginPath();

        ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
        ctx.clip();
    },
    afterDatasetsDraw: function(chartInstance) {
        chartInstance.chart.ctx.restore();
    },
});

Check your updated fiddle here and its result :

enter image description here

Upvotes: 4

Related Questions