Remove some points in line chart chartjs - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Remove some points in line chart chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> 
      <script type="text/javascript">
$(document).ready(function(){
        var legStretchtCtx = document.getElementById("leg-stretch-chart");
          var myChart = new Chart(legStretchtCtx, {
              type: 'line',
              data: {//from w w w  . ja  v a2s .  c  o m
                  labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6","Day 7"],
                  datasets: [{
                      label: 'Leg Stretch',
                      data: [3, 4, 5, 4, 3, 3.5, 3.5],
                      backgroundColor:"#70d6db",
                      borderColor: ["#70d6db"],
                      borderWidth: 4,
                      pointBackgroundColor: "#fff",
                      pointRadius: [8, 8, 8, 8, 8, 8, 8],
                      pointHoverRadius: 8,
                          pointHoverBackgroundColor: "#0ba8b0",
                      pointHoverBorderColor: "#26c1c9",
                          pointBorderColor:"#26c1c9"
                  }]
              },
              options: {
                  legend: {
                      display: false,
                      labels: {
                          display: true
                      }
                  },
               responsive:true,
                  scales: {
                      xAxes: [{
                          gridLines: {
                              display: false,
                              drawBorder:false,
                          },
                          ticks: {
                              display: false,
                              fontFamily: "Montserrat",
                              fontColor: "#2c405a",
                        fontSize: 12
                          }
                      }],
                      yAxes: [{
                          gridLines: {
                              display: false,
                              drawBorder:false,
                          },
                          ticks: {
                        display: false,
                        fontFamily: "Montserrat",
                              fontColor: "#2c405a",
                                fontSize: 12,
                        stepSize:1,
                              min: 0,
                              max: 10,
                     }
                      }]
                  }
              }
          });
   $("#btnRemovePoints").click(function()
   {
      myChart.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
      myChart.update();
   });
});

      </script> 
   </head> 
   <body> 
      <button id="btnRemovePoints"> Remove points </button> 
      <div class="chart-container"> 
         <div class="leg-stretch-chart-inner"> 
            <canvas id="leg-stretch-chart" width="100%" height=""></canvas> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials