I have to hide / remove all data points except the second last point as shown in this image I have searched everywhere but couldn't find the proper solution to achieve this.
myChart.datasets[0].points[0].display = false;
legStretchtCtx.update();
Above snippet is for Chart.js Version 1.0 but I'm using Chart.js Version: 2.7.1 . I have used this snippet but its giving an error:
Cannot read property '0' of undefined
var legStretchtCtx = document.getElementById("leg-stretch-chart");
// var legStretch =
var myChart = new Chart(legStretchtCtx, {
type: 'line',
data: {
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,
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,
}
}]
}
}
});<script src=".js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="leg-stretch-chart-inner">
<canvas id="leg-stretch-chart" width="100%" height=""></canvas>
</div>
</div>I have to hide / remove all data points except the second last point as shown in this image I have searched everywhere but couldn't find the proper solution to achieve this.
myChart.datasets[0].points[0].display = false;
legStretchtCtx.update();
Above snippet is for Chart.js Version 1.0 but I'm using Chart.js Version: 2.7.1 . I have used this snippet but its giving an error:
Cannot read property '0' of undefined
var legStretchtCtx = document.getElementById("leg-stretch-chart");
// var legStretch =
var myChart = new Chart(legStretchtCtx, {
type: 'line',
data: {
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,
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,
}
}]
}
}
});<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="leg-stretch-chart-inner">
<canvas id="leg-stretch-chart" width="100%" height=""></canvas>
</div>
</div>3 Answers
Reset to default 5First, change pointRadius to array:
pointRadius: [8, 8, 8, 8, 8, 8, 8]
Then, you have to rewrite this array with specific values for each point (in our case, the second last pont) and update:
$("#btnRemovePoints").click(function()
{
//change the radius of every point except one
myChart.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart.update();
});
More details in this fiddle: https://jsfiddle/s7m1961t/
$( document ).ready(function() {
//My Chart 1
myChart1.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart1.update();
//My Chart 2
myChart2.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart2.update();
});
works on version 4.2.1 The code displays events as dots if the checkbox is pressed, otherwise, the graph is without dots.
labels - dates. datasets - the number of vacancies
const v = checkbox.value // getting the value from the checkbox
// where there are no events, we put 0, and where there are 10.
// that is, we make either visible or invisible points
const points = labels.map(date => (date.events ? 10 : 0))
// if the checkbox is pressed, then we show points, otherwise we do not show any points
chart.data.datasets[0].pointRadius = v ? points : []
chart.update()