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>
Source: stackoverflow.com
Related Query
- ChartJS - How to change color of some data points in graph
- How to change the color of Chart.js points depending on the label
- How to change the color of legend in chartjs and be able to add one more legend?
- How to change line segment color of a line graph in Chart.js?
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS -- How do I change scale color when I have to scales?
- How to show only the data points that have a change in Chartjs?
- how to change color of bar if its goes above avg score in mixed graph chart.js
- Chart.js color change of the data points
- How to remove some points in chartjs
- Missing Tooltip for some data points using chartjs
- How to hide some points inside my line graphic in React ChartJS 2?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How to set the chartjs bar graph scale to the highest value in the result data
- In ChartJS how do I change the color of a label in the legend?
- How to properly feed data to ChartJS with different number of x(labels) and y(data) points
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Chart.Js : How to change the color of a point, based on a third data
- chartjs line graph points with different color
- How to change line color based on data - chartist or chart.js
- how to change color of dots in graph using chart.js
- how to set the color of all points in a line graph to the same in chart.js?
- Angular 2+: How to load a data to chartjs graph in every second in Angular
- How to change bar color acording to label value in chartjs
- how to add color to each data in chartjs scatter plot
- How to display that data was unavaible during some time in a Chart.js (or any other library's) timeline graph
- How can I change the color of certain lines in chartjs / vue-chartjs?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- how to dynamicly change the json data in chartjs
- Chartjs change grid line color
More Query from same tag
- How to use canvasjs to draw column chart using text data
- The chart list is not showing
- How to make a interactive legend with chartjs
- How do I horizontally center a line chart when their is a single X-Axis value?
- Need help styling chart JS Radar chart
- ChartJs create Chart from array
- Put tooltip on the middle of two bars
- Chart.js don't show the first time
- How to set minimum value to Radar Chart in chart js
- Hiding labels on y axis in Chart.js
- ChartJs DrawBorder() Configuration not working
- custom tooltip opacity always 1
- Chart.js How can I embed additional values to each data point in radar chart
- The chart is not getting shown when page is loaded
- How to represent MySQL data in the form of charts
- Angular Dynamic Chart Generate
- Chart.JS Display 5 largest values in the legend
- Chart.js version 2.5 tooltip align items horizontally
- Chart.js br chart only displaying first value
- reactive chart with chart.js in meteor
- TypeError: Cannot read property 'currentStyle' of null in chart.js
- Chart.js: Chart not resizing in iframe
- How to get unique variables from nested object?
- How to edit my custom tooltips in my line chart using chart.js?
- How can I format chart.js data labels while using chart.js datalabels plugin?
- chart js and json, chart not showing up
- Chart.js canvas resize
- Chart.JS - Set fixed X and Y axis values in time chart?
- Chartjs 3 ToolTip styling is not being picked up
- chart js Labels and Grouping labels