I want to change the behaviour of my vertical line in my chart js. Currently vertical line is on top of my points and hover points: i want it to be behind. My code setup posted below. Also this line is drawn on hover. So i want to only change z-index of vertical line. this line has z-index if so how can i target it?
my code
var ctx = document.getElementById('chart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(1000, 1000, 1000, 0);
gradientStroke.addColorStop(1, "rgb(33, 240, 43)");
gradientStroke.addColorStop(0.25, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0.5, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0, "rgb(14, 144, 177)");
var data = {
legend: false,
labels: ["02 FEB", "03 FEB", "04 FEB", "05 FEB", "06 FEB", "07 FEB", "08 FEB", "09 FEB", "10 FEB", "11 FEB", "12 FEB"],
datasets: [{
fill: false,
backgroundColor: gradientStroke,
borderColor: gradientStroke,
borderWidth: 4,
data: [9412, 17000, 18000, 11000, 9254, 7200, 11600, 15644, 11222, 13333, 12545],
pointBorderWidth: 9,
pointRadius: 9,
pointBorderColor: 'transparent',
pointHoverRadius: 8,
pointHoverBorderWidth: 3,
pointHoverBackgroundColor: '#27f327',
pointHoverBorderColor: 'white',
pointBackgroundColor: 'transparent'
}]
};
var options = {
hover: {
mode: 'index',
intersect: true
},
tooltips: {
backgroundColor: '#FFF',
bodyFontColor: '#393f5b',
bodyFontSize: 20,
displayColors: false,
bodySpacing: 10,
intersect: false,
bodyFontStyle: 'bold',
xPadding: 15,
yPadding: 15,
mode: 'index',
callbacks: {
title: function() {}
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "#6e6e6e26",
padding: 0,
},
ticks: {
beginAtZero: true,
min: 0,
max: 20000,
stepSize: 5000,
display: false
}
}],
xAxes: [{
gridLines: {
display: false,
color: "#6e6e6e26",
},
ticks: {
fontSize: 14,
fontColor: '#afb6d4',
}
}]
}
};
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
draw.apply(this, arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#4b4b4b8e';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
_stroke.apply(this, arguments);
ctx.restore();
}
};
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.shadowBlur = 1;
ctx.stroke();
ctx.restore();
}
}
});
var chart = new Chart(ctx, {
type: 'LineWithLine',
data: data,
options: options
});
Move Chart.controllers.line.prototype.draw.call(this, ease); after vertical line drawing:
var ctx = document.getElementById('chart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(1000, 1000, 1000, 0);
gradientStroke.addColorStop(1, "rgb(33, 240, 43)");
gradientStroke.addColorStop(0.25, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0.5, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0, "rgb(14, 144, 177)");
var data = {
legend: false,
labels: ["02 FEB", "03 FEB", "04 FEB", "05 FEB", "06 FEB", "07 FEB", "08 FEB", "09 FEB", "10 FEB", "11 FEB", "12 FEB"],
datasets: [{
fill: false,
backgroundColor: gradientStroke,
borderColor: gradientStroke,
borderWidth: 4,
data: [9412, 17000, 18000, 11000, 9254, 7200, 11600, 15644, 11222, 13333, 12545],
pointBorderWidth: 9,
pointRadius: 9,
pointBorderColor: 'transparent',
pointHoverRadius: 8,
pointHoverBorderWidth: 3,
pointHoverBackgroundColor: '#27f327',
pointHoverBorderColor: 'white',
pointBackgroundColor: 'transparent'
}]
};
var options = {
hover: {
mode: 'index',
intersect: true
},
tooltips: {
backgroundColor: '#FFF',
bodyFontColor: '#393f5b',
bodyFontSize: 20,
displayColors: false,
bodySpacing: 10,
intersect: false,
bodyFontStyle: 'bold',
xPadding: 15,
yPadding: 15,
mode: 'index',
callbacks: {
title: function() {}
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "#6e6e6e26",
padding: 0,
},
ticks: {
beginAtZero: true,
min: 0,
max: 20000,
stepSize: 5000,
display: false
}
}],
xAxes: [{
gridLines: {
display: false,
color: "#6e6e6e26",
},
ticks: {
fontSize: 14,
fontColor: '#afb6d4',
}
}]
}
};
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
draw.apply(this, arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#4b4b4b8e';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
_stroke.apply(this, arguments);
ctx.restore();
}
};
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.shadowBlur = 1;
ctx.stroke();
ctx.restore();
}
Chart.controllers.line.prototype.draw.call(this, ease);
}
});
var chart = new Chart(ctx, {
type: 'LineWithLine',
data: data,
options: options
});
#chart {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
Related
I'm able to hide bar on legend click, but value is not hidden for bar chart in charts.js
I am not able to hide datavalues on click of legend, only bar is hidden
I have shared js fiddle code link below
Here, is the js fiddle
https://jsfiddle.net/npyvw1L8/
var ctx = document.getElementById("canvas").getContext("2d");
var nomi = \[2017, 2018, 2019\];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: nomi,
datasets: \[{
label: 'PP PERVENUTI',
data: \[50, 30, 45\],
backgroundColor: "#8A0808",
fill: false,
borderColor: "#8A0808",
borderWidth: 3
},
{
label: 'PP EVASI',
data: \[60, 45, 12\],
backgroundColor: "#0B610B",
fill: false,
borderColor: "#0B610B",
borderWidth: 3
},
{
label: 'PI PERVENUTI',
data: \[20, 25, 35\],
backgroundColor: "#8A0886",
fill: false,
borderColor: "#8A0886",
borderWidth: 3
},
{
label: 'PI EVASI',
data: \[10, 20, 30\],
backgroundColor: "#0404B4",
fill: false,
borderColor: "#0404B4",
borderWidth: 3
}
\]
},
options: {
legend: {
display: true,
position: "bottom"
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
debugger
this.data.datasets.forEach(function(dataset) {
for (var i = 0; i < dataset.data.length; i++) {
for (var key in dataset._meta) {
var model = dataset._meta\[key\].data\[i\]._model;
ctx.fillText(dataset.data\[i\], model.x, model.y - 5);
}
}
});
}
}
}
});
I am working on Vue and have implemented this chart, any help will be appreciated
You can get the meta info for that dataset and check if its hidden, if so skip that render loop:
var ctx = document.getElementById("canvas").getContext("2d");
var nomi = [2017, 2018, 2019];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: nomi,
datasets: [{
label: 'PP PERVENUTI',
data: [50, 30, 45],
backgroundColor: "#8A0808",
fill: false,
borderColor: "#8A0808",
borderWidth: 3
},
{
label: 'PP EVASI',
data: [60, 45, 12],
backgroundColor: "#0B610B",
fill: false,
borderColor: "#0B610B",
borderWidth: 3
},
{
label: 'PI PERVENUTI',
data: [20, 25, 35],
backgroundColor: "#8A0886",
fill: false,
borderColor: "#8A0886",
borderWidth: 3
},
{
label: 'PI EVASI',
data: [10, 20, 30],
backgroundColor: "#0404B4",
fill: false,
borderColor: "#0404B4",
borderWidth: 3
}
]
},
options: {
legend: {
display: true,
position: "bottom"
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
var ctx = this.chart.ctx;
const chart = this.chart;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
if (chart.getDatasetMeta(i).hidden) {
return;
}
for (var i = 0; i < dataset.data.length; i++) {
for (var key in dataset._meta) {
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
}
});
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>
I want to draw a reference line in the time series chart. I tried to use two x axis and two y axis so I have like two graphs in one. the one would show time scale line and the other one would show linear line (reference line).
image example of what I want it to look like :
I tried in fiddle but its like the two X axis are connected and not scaling separately:
var data = {
labels: [],
datasets: [{
fill: 'none',
label: 'signal1',
backgroundColor: 'rgba(75,192,192,0.4)',
pointRadius: 5,
pointHoverRadius: 7,
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1,
lineTension: 0,
xAxisID: 'xAxis1',
yAxisID: 'yAxis1',
data: [{
x: '2016-07-17',
y: 44
},
{
x: '2016-07-19',
y: 50
},
{
x: '2016-07-22',
y: 84
},
],
}, {
fill: 'none',
label: 'signal2',
lineTension: 0,
xAxisID: 'xAxis2',
yAxisID: 'yAxis2',
data: [{
x: 0,
y: 55
},
{
x: 1,
y: 55
},
]
}],
};
var option = {
scales: {
yAxes: [{
id: 'yAxis1',
offset: true,
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: true,
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 15,
drawBorder: true,
},
ticks: {
beginAtZero: false,
padding: 5,
fontSize: 12,
fontColor: '#222222',
},
}, {
id: 'yAxis2',
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: false,
},
}],
xAxes: [{
id: 'xAxis1',
offset: true,
bounds: 'data',
type: 'time',
distribution: 'linear',
time: {
unit: 'day',
displayFormats: {
day: 'D.M.YYYY',
},
},
gridLines: {
display: true,
color: 'rgba(151, 151, 151, 0.2)',
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 5,
drawBorder: true,
},
ticks: {
source: 'auto',
autoSkip: true,
autoSkipPadding: 30,
maxRotation: 0,
padding: 2,
fontSize: 12,
fontColor: '#222222',
},
}, {
id: 'xAxis2',
type:"linear",
gridLines: {
display: false,
drawBorder: false,
},
}]
}
};
https://jsfiddle.net/2gyk9v5e/15/
This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code. In your case, you can use the afterDraw hook to draw the desired lines directly on the canvas using CanvasRenderingContext2D.
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
chart.data.datasets[0].refLines.forEach(r => {
var y = yAxis.getPixelForValue(r.y);
ctx.strokeStyle = r.color;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
});
ctx.restore();
}
}],
Above code assumes that the reference lines are defined inside your dataset through the following definition.
refLines: [
{ y: 45, color: '#0be059' },
{ y: 49, color: '#fc3503' }
]
Please take a look at your amended code and see how it works.
new Chart('canvas', {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
chart.data.datasets[0].refLines.forEach(r => {
var y = yAxis.getPixelForValue(r.y);
ctx.strokeStyle = r.color;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
datasets: [{
fill: false,
label: 'signal1',
backgroundColor: 'rgba(75,192,192,0.4)',
pointRadius: 5,
pointHoverRadius: 7,
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1,
lineTension: 0,
data: [
{ x: '2016-07-14', y: 44 },
{ x: '2016-07-15', y: 52 },
{ x: '2016-07-16', y: 45 },
{ x: '2016-07-17', y: 47 },
{ x: '2016-07-18', y: 35 },
{ x: '2016-07-19', y: 46 },
{ x: '2016-07-20', y: 50 },
{ x: '2016-07-21', y: 44 }
],
refLines: [
{ y: 45, color: '#0be059' },
{ y: 49, color: '#fc3503' }
]
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
display: false,
drawBorder: false
}
}],
xAxes: [{
offset: true,
bounds: 'data',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'D.M.YYYY',
}
},
gridLines: {
color: 'rgba(151, 151, 151, 0.2)',
zeroLineColor: '#979797',
zeroLineWidth: 1,
tickMarkLength: 5,
drawBorder: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="canvas" height="80"></canvas>
Is it possible to add some shadow while hovering an index in chartJS?
Somethink like in this answer which add a line when points are hovered but i would to use it with a bar chart and make it look something like this:
Here is my actual chart jsfiddle
<div class="chart-area chart-reparti">
<canvas id="chartReparti" width="1600" height="250"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
var optionsReparti = {
maintainAspectRatio: false,
legend: {
display: true
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
displayColors: true,
mode: 'index',
intersect: 0
},
responsive: true,
scales: {
yAxes: [{
id: 'importo',
gridLines: {
drawBorder: false,
borderDash: [4, 8],
color: 'rgba(0,132,255,0.4)',
},
ticks: {
beginAtZero: true,
userCallback: function (value, index, values) {
return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
}, {
id: 'qta',
gridLines: {
drawBorder: false,
borderDash: [4, 8],
color: 'rgba(247,136,0,0.4)',
},
ticks: {
beginAtZero: true
}
},
],
xAxes: [{
categoryPercentage: 1,
barPercentage: 0.4,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
}
}]
}
};
var ctx = document.getElementById("chartReparti").getContext('2d');
var gradientImporto = ctx.createLinearGradient(0, 170, 0, 50);
gradientImporto.addColorStop(0, "rgba(0, 98, 255, 1)");
gradientImporto.addColorStop(1, "rgba(84, 150, 255, 1)");
var gradientQuantita = ctx.createLinearGradient(0, 170, 0, 50);
gradientQuantita.addColorStop(0, "rgba(247, 136, 0, 1)");
gradientQuantita.addColorStop(1, "rgba(255, 209, 72, 1)");
var chartReparti = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne', 'Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne'],
datasets: [{
label: "Quantità ",
yAxisID: 'qta',
fill: true,
backgroundColor: gradientQuantita,
pointBackgroundColor: '#f78800',
data: [15, 15, 29, 10, 35, 12, 29, 10, 35, 12]
}, {
label: "Importo",
yAxesID: 'importo',
fill: true,
backgroundColor: gradientImporto,
pointBackgroundColor: '#0084ff',
data: [2954, 4564, 2954, 4564, 3456, 4212, 5060, 3456, 4212, 5060]
}
]
},
options: optionsReparti
});
Actually the code of the modified plugin got from this answer is not included as it wasn't working at all.
U can customize code before draw it
Working demo : https://jsfiddle.net/4rasm1hc/
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.bar.extend({
draw: function() {
draw.apply(this, arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#000000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
_stroke.apply(this, arguments)
ctx.restore();
}
}
});
Chart.defaults.LineWithLine = Chart.defaults.bar;
Chart.controllers.LineWithLine = Chart.controllers.bar.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x+15,
topY =6000,
width=activePoint._view.width,
bottomY = 0;
console.log(activePoint);
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x+width-10, bottomY+30);
ctx.lineWidth = width*4;
ctx.strokeStyle = '#e5e0e01a';
ctx.stroke();
ctx.restore();
}
}
});
My Chart.js plot uses two Y-Axis: both of them must have the same scale and max/min values. I update the second Y-Axis step depending on a boolean value I dinamically set and everything is working flawless. Still, I want to update the second Y-Axis (redrawn it) when I trigger a legend event (clicking on one of the legends). I can't really make it work: the plot refresh, but my second Y-Axis step doesn't change.
Here my draw function. I've read the Chart.js documentation I've found here, but I can really understand how to fill my legend onClick event.
function drawChart(pointsArray, curveFeatures) {
let minX = parseFloat(curveFeatures.minX);
let minY = parseFloat(curveFeatures.minY);
let maxX = parseFloat(curveFeatures.maxX);
let maxY = parseFloat(curveFeatures.maxY);
let stepResult = parseInt(curveFeatures.stepResult);
let startX = parseFloat(curveFeatures.startX);
let endX = parseFloat(curveFeatures.endX);
let upperLimit = parseFloat(curveFeatures.upperLimit);
let lowerLimit = parseFloat(curveFeatures.lowerLimit);
let stepSize;
let borderColour;
let backgroundColour;
if (stepResult === 1) {
stepSize = 0.5;
maxY = parseFloat(maxY.toFixed(2)) + stepSize;
minY = parseFloat(minY.toFixed(2)) - stepSize;
borderColour = "rgba(1, 165, 15, 1)";
backgroundColour = "rgba(1, 165, 15, 0.2)";
} else {
stepSize = 0.01;
maxY = parseFloat(maxY.toFixed(2));
minY = parseFloat(minY.toFixed(2));
borderColour = "rgba(252, 45, 45, 1)";
backgroundColour = "rgba(252, 45, 45, 0.2)";
}
let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "Press Signal",
cubicInterpolationMode: "monotone",
fill: false,
borderWidth: 5,
radius: 1,
borderColor: borderColour,
backgroundColor: backgroundColour,
pointBorderColor: borderColour,
pointBackgroundColor: backgroundColour,
data: pointsArray
}, {
label: "Evaluation Windows",
cubicInterpolationMode: "monotone",
fill: true,
borderWidth: 2,
radius: 2,
borderColor: "rgb(94, 233, 255, 1)",
backgroundColor: "rgb(94, 233, 255, 0.2)",
pointBorderColor: "rgb(94, 233, 255, 1)",
pointBackgroundColor: "rgb(94, 233, 255, 0.2)",
data: [{
x: startX,
y: lowerLimit
}, {
x: startX,
y: upperLimit
}, {
x: endX,
y: upperLimit
}, {
x: endX,
y: lowerLimit
}, {
x: startX,
y: lowerLimit
}]
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: {
duration: 2000
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 10
}
},
title: {
display: true,
text: "Press Signal",
fontSize: 30,
padding: 20
},
legend: {
labels: {
fontSize: 16
},
onClick: function(e, legendItem) {
stepSize = 0.01;
// Should I do things, here?
ci.update();
}
},
scales: {
xAxes: [{
display: true,
type: "linear",
position: "bottom",
ticks: {
fontSize: 14,
},
scaleLabel: {
display: true,
fontSize: 16,
fontColor: "black",
labelString: "Position (Abs.) [mm]"
}
}],
yAxes: [{
display: true,
type: "linear",
position: "left",
ticks: {
fontSize: 14,
},
scaleLabel: {
display: true,
fontSize: 16,
fontColor: "black",
labelString: "Force [kN]"
}
}, {
display: true,
type: "linear",
position: "right",
ticks: {
fontSize: 14,
beginAtZero: false,
max: maxY,
min: minY,
stepSize: stepSize
},
afterTickToLabelConversion: function(scaleInstance) {
if (stepResult === 1) {
// set the first and last tick to null so it does not display
// note, ticks[0] is the last tick and ticks[length - 1] is the first
scaleInstance.ticks[0] = null;
scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
// need to do the same thing for this similiar array which is used internally
scaleInstance.ticksAsNumbers[0] = null;
scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
}
}
}]
}
}
});
}
I've found my way. Here a snippet for whoever will have my same problem:
onClick: function(event, legendItem) {
let index = 1;
myChart.data.datasets[index].hidden = !myChart.data.datasets[index].hidden;
if (myChart.data.datasets[index].hidden) {
myChart.options.scales.yAxes[index].ticks.max = maxY;
myChart.options.scales.yAxes[index].ticks.min = minY;
myChart.options.scales.yAxes[index].ticks.stepSize = stepSize;
} else {
if (stepResult === 0) {
myChart.options.scales.yAxes[index].ticks.max = 3.5;
myChart.options.scales.yAxes[index].ticks.min = 0;
myChart.options.scales.yAxes[index].ticks.stepSize = 0.5;
}
}
myChart.update();
}
I've created a chart by using Chart.js. It displays some currency values on horizontal and vertical axes. I added many points and I show them as circle. I want to add a vertical line on the point when hover on the point like this:
And here is my chart code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<div class="container" style="width: 100%;margin-top:30px;">
<canvas id="myChart"></canvas>
</div>
<script>
let zzz = document.getElementById('myChart').getContext('2d');
// Global Options
Chart.defaults.global.defaultFontFamily = 'Arial';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';
let massPopChart = new Chart(zzz, {
type:'line',
data:{
labels:[
'20/09/2017',
'20/10/2017',
'20/11/2017',
'20/12/2017'
],
datasets:[{
label:'US Dollar',
fill: false,
lineTension: 0,
data:[
123,
143,
156,
122
],
pointBackgroundColor: '#f90',
pointHoverBackgroundColor: '#fff',
//backgroundColor:'green',
backgroundColor:[
'#2277bb',
'#2277bb',
'#2277bb',
'#000000',
],
borderWidth:3,
borderColor:'#f90',
hoverBorderWidth:3,
hoverBorderColor:'#fff'
}]
},
options:{
title:{
display:true,
text:'Chart 1',
fontSize:16
},
legend:{
display:true,
position:'top',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
elements: {
point: {
radius: 5
}
},
}
});
</script>
And how can I add a line to my chart like in the example above?
I found another question that describes the solution you want. I hope this helps.
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 4;
ctx.strokeStyle = '#757575';
ctx.stroke();
ctx.restore();
}
}
});
Chart.defaults.global.defaultFontFamily = 'Arial';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';
var chart = new Chart("myChart", {
type: 'LineWithLine',
data: {
labels: ['20/09/2017',
'20/10/2017',
'20/11/2017',
'20/12/2017'
],
datasets: [{
label: 'US Dollar',
fill: false,
lineTension: 0,
data: [123, 143, 156, 122],
pointBackgroundColor: '#f90',
pointHoverBackgroundColor: '#fff',
//backgroundColor:'green',
backgroundColor: ['#2277bb', '#2277bb', '#2277bb', '#000000', ],
borderWidth: 3,
borderColor: '#f90',
hoverBorderWidth: 3,
hoverBorderColor: '#fff'
}]
},
options: {
title: {
display: true,
text: 'Chart 1',
fontSize: 16
},
legend: {
display: true,
position: 'top',
labels: {
fontColor: '#000'
}
},
layout: {
padding: {
left: 50,
right: 0,
bottom: 0,
top: 0
}
},
tooltips: {
enabled: true,
intersect: false
},
elements: {
point: {
radius: 5
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width: 100%;margin-top:30px;">
<canvas id="myChart"></canvas>
</div>