score:0
your code for getting the right pixel is incorrect if you change it to this it will work: xaxis.getpixelforvalue(chart.config.data.datasets[0].data[index].x)
live example:
var originallinedraw = chart.controllers.line.prototype.draw;
chart.helpers.extend(chart.controllers.line.prototype, {
draw: function() {
originallinedraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineatindex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginpath();
ctx.moveto(xaxis.getpixelforvalue(chart.config.data.datasets[0].data[index].x), yaxis.top);
ctx.strokestyle = 'red';
ctx.lineto(xaxis.getpixelforvalue(chart.config.data.datasets[0].data[index].x), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
datasets: [{
label: "my first dataset",
data: [{
x: moment(1591900200000),
y: 1936.88
}, {
x: moment(1592159400000),
y: 379.38
},
{
x: moment(1592245800000),
y: 2495.94
}, {
x: moment(1592332200000),
y: -938.44
},
{
x: moment(1592418600000),
y: -1697.19
}, {
x: moment(1592505000000),
y: -1058.44
},
{
x: moment(1592764200000),
y: 439.38
}, {
x: moment(1592850600000),
y: 758.75
}
],
fill: false,
backgroundcolor: 'blue',
bordercolor: 'blue',
}],
lineatindex: 2
},
options: {
scales: {
xaxes: [{
type: 'time'
}]
}
}
};
new chart('chartjscontainer', config);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to create vertical arbitrary line in financial chart?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to create a line chart indicating which month a user wrote more or less blogs?
- How to create a line on a chart using chartjs-plugin-annotation
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- How can I create a vertical scrolling in Chart.js for line chart?
- how to create line chart using chart.js in angular 2+
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Chart.js — drawing an arbitrary vertical line
- Chart.js - How to set a line chart dataset as disabled on load
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to display Line Chart dataset point labels with Chart.js?
- How to create datasets dynamically for chart.js Line chart?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How to display value of only one datapoint in line chart
- How to render a vertical line on hover in chartjs
- Draw a horizontal and vertical line on mouse hover in chart js
- How to align Chart.JS line chart labels to the center
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
More Query from same tag
- How to hide some points inside my line graphic in React ChartJS 2?
- Resize Chart Independently From Legend in ChartJS for Canvas Download
- TypeError React-Chartjs After Upgrading to Chart.js v3
- Creating dynamic object to reorganize API response using Typescript
- How to fix chart looking blurry in ChartJS?
- ChartJs canvas showing previous graph when changing Graph types
- Show percentage of category relative to stacked bar in Chart.js
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- make chartjs legend labels tabbable
- Increase space between largest bar and top grid line in charts.js
- Reactive Vue Chart.js component using Typescript
- How to create a line chart indicating which month a user wrote more or less blogs?
- Unwanted line chart ''shadow" using chart.js
- How to make integer scale in Chartjs
- Chart.js doughnut and pie chart at same canvas mixed
- How to add Dyamic JSON Dropdown Menu in Angular JS
- chartjs: need color bars near yAxis scale
- Use dynamic data in Chart.js with Node.Js
- how to see labels without losing middle text in doughnut chart
- chartjs plugin datalabels does not show value on charts
- chart.js Multiple barchart in time scale won't display all
- Display JSON data in react-chartjs-2
- Chart.js tooltip values display in two lines
- chart.js bar chart change color based on value
- Bar Chart in Angular JS Using Chartjs
- How to correct my dataset so charts.js bar graph will stack
- How to apply data dynamically on initialisation for chart.js in angular?
- How to get the image from graph created using chartjs
- How to eliminate all borders from chartjs2 stacked chart
- Chart.js Box Annotations Fill Entire Chart