score:1

Accepted answer

you can provide an array of colors for option: pointbackgroundcolor
and optionally: pointbordercolor

each color in the array represents a point on the line.

see following working snippet...

window.chartcolors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(51, 204, 51)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};


var options2 = {
  type: 'line',
  data: {
    labels: ["02/07/2020 8:01", "02/07/2020 13:00", "02/07/2020 17:00", "02/07/2020 22:00", "02/08/2020 8:01", "02/08/2020 13:01", "02/08/2020 17:00", "02/08/2020 22:00", "02/09/2020 8:01", "02/09/2020 13:00", "02/09/2020 17:00", "02/09/2020 22:00"],
    datasets: [{
      label: 'water level',
      data: [13.534, 13.652, 13.298, 13.062, 11.763, 13.613, 13.534, 12.629, 11.369, 13.495, 13.574, 13.456],
      borderwidth: 1,
      linetension: 0,
      fill: false,
      bordercolor: window.chartcolors.blue,

      // provide colors for each point
      pointbackgroundcolor: [window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.red, window.chartcolors.orange, window.chartcolors.yellow, window.chartcolors.green, window.chartcolors.purple, window.chartcolors.grey, window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.blue],
      pointbordercolor: [window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.red, window.chartcolors.orange, window.chartcolors.yellow, window.chartcolors.green, window.chartcolors.purple, window.chartcolors.grey, window.chartcolors.blue, window.chartcolors.blue, window.chartcolors.blue]
    }],
    scales: {
      xaxes: [{
        ticks: {
          beginatzero: false
        }
      }]
    }
  },
  options: {
    legend: {
      position: 'bottom',
      display: false
    },
    responsive: true,
    beziercurve: false,
    scales: {
      xaxes: [{
        ticks: {
          autoskip: true,
          maxrotation: 90,
          minrotation: 90
        }
      }],
      yaxes: [{
        ticks: {
          min: 0,
          max: 36,
          stepsize: 10
        },
        scalelabel: {
          display: true,
          labelstring: 'inches'
        }
      }]
    }
  },
  plugins: []
};
var ctx2 = document.getelementbyid('chart2').getcontext('2d');
var chart2 = new chart(ctx2, options2);

function refreshgraph2() {
  console.log(chart2);
  var dt2 = {
    serial: "310021000e51353532343635",
    from: $("#txtfrom2").val(),
    to: $("#txtto2").val()
  };

  $.post("/mobile/getgraphdata", dt2, function(data) {
    var labels2 = _.pluck(data.result, 'createdatlabel');
    var values2 = _.pluck(data.result, 'waterlevel');
    chart2.data.labels = labels2;
    chart2.data.datasets[0].data = values2;
    console.log(labels2);
    console.log(values2);
    //chart2.data.datasets[0].data = data.result;
    chart2.update();
    return false;
  });
}

$(document).ready(function() {
  $("#btnrefresh2").on("click", function() {
    refreshgraph2();
    return false;
  });
});
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="collapse2tertiaryone0" class="collapse show" style="padding:0px;">
  <div class="" style="padding: 0px;">
    <div class="tabs">
      <ul class="nav nav-tabs nav-justified" role="group">
        <li class="nav-item" role="button">
          test
        </li>
      </ul>
      <div class="tab-content">
        <div id="datalog0" class="tab-pane active">
          <canvas class="wrapper col-12" id="chart2" style="padding-left:2px;padding-right:2px" name="chart2"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


Related Query