score:2
Accepted answer
I found the solution for it by myself. You have to use the chart bottom
and top
properties to map the correct size:
// read chart area
var chartArea = chart.chartArea;
var yValue = map(position.y, chartArea.bottom, chartArea.top, yMin, yMax);
Then the mapping is pixel perfect.
score:1
The answer was very useful but it took me quite a while to understand how to apply it.
Therefore in case it is helpful to someone here's a simple working example.
In case it's not obvious, the three files below are respectively script.js
, style.css
and index.html
.
// some data to be plotted
var x_data = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
var y_data_1 = [86,114,106,106,107,111,133,221,783,2478];
var y_data_2 = [2000,700,200,100,100,100,100,50,25,0];
// globals
var activePoint = null;
var canvas = null;
// draw a line chart on the canvas context
window.onload = function () {
// Draw a line chart with a single data set
var ctx = document.getElementById("canvas").getContext("2d");
canvas = document.getElementById("canvas");
window.myChart = Chart.Line(ctx, {
data: {
labels: x_data,
datasets: [
{
data: y_data_1,
label: "Data 1",
borderColor: "#3e95cd",
fill: false
},
{
data: y_data_2,
label: "Data 2",
borderColor: "#cd953e",
fill: false
}
]
},
options: {
animation: {
duration: 0
},
tooltips: {
mode: 'nearest'
}
}
});
// set pointer event handlers for canvas element
canvas.onpointerdown = down_handler;
canvas.onpointerup = up_handler;
canvas.onpointermove = null;
};
function down_handler(event) {
// check for data point near event location
const points = window.myChart.getElementAtEvent(event, {intersect: false});
if (points.length > 0) {
// grab nearest point, start dragging
activePoint = points[0];
canvas.onpointermove = move_handler;
};
};
function up_handler(event) {
// release grabbed point, stop dragging
activePoint = null;
canvas.onpointermove = null;
};
function move_handler(event)
{
// locate grabbed point in chart data
if (activePoint != null) {
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
// read mouse position
const helpers = Chart.helpers;
var position = helpers.getRelativePosition(event, myChart);
// convert mouse position to chart y axis value
var chartArea = window.myChart.chartArea;
var yAxis = window.myChart.scales["y-axis-0"];
var yValue = map(position.y, chartArea.bottom, chartArea.top, yAxis.min, yAxis.max);
// update y value of active data point
data.datasets[datasetIndex].data[activePoint._index] = yValue;
window.myChart.update();
};
};
// map value to other coordinate system
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))
};
body {
font-family: Helvetica Neue, Arial, sans-serif;
text-align: center;
}
.wrapper {
max-width: 800px;
margin: 50px auto;
}
h1 {
font-weight: 200;
font-size: 3em;
margin: 0 0 0.1em 0;
}
h2 {
font-weight: 200;
font-size: 0.9em;
margin: 0 0 50px;
color: #555;
}
a {
margin-top: 50px;
display: block;
color: #3e95cd;
}
<!DOCTYPE html>
<html>
<!-- HEAD element: load the stylesheet and the chart.js library -->
<head>
<title>Draggable Points Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- BODY element: create a canvas and render a chart on it -->
<body>
<!-- canvas element in a container -->
<div class="wrapper">
<h1>Draggable Points Example</h1>
<h2>Click a data point and drag up/down</h2>
<canvas id="canvas" width="1600" height="900"></canvas>
</div>
<!-- call external script to create and render a chart on the canvas -->
<script src="script.js"></script>
</body>
</html>
Source: stackoverflow.com
Related Query
- Map event position to y axis value in chartjs line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Obtain max value of y axis of line chart rendered with Chart.js
- chartjs - Drawing vertical line on integer x axis value
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Chartjs line chart gets all scrambled up when an x value coincides with a label
- Chartjs Bar Chart Y Axis set base starting value to not be 0
- ChartJS set color of Line chart points depending on Y Axis
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to add an on click event to my Line chart using Chart.js
- Display line chart with connected dots using chartJS
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- Click event on stacked bar chart - ChartJs
- ChartJs line chart repaint glitch while hovering over
- How to display value of only one datapoint in line chart
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Changing x axis labels in Chart.js line chart
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- Show data dynamically in line chart - ChartJS
More Query from same tag
- Chart.js line graph not displaying when using formatted timestamp labels
- Live update the charts.js graph on a web page using json data received from a remote server
- How to send data to chart js using angular
- Chart.js Picture inside doughnut segment
- Chart bundle js is not showing dynamic data
- Tooltips showing wrong data in ChartJS
- Filtering labels to show user from Chart.js
- Chart.js Y-Axis data not rendering
- Display dataset values on bar ChartJs 2.1.6
- How to emit an event with vue-chartjs?
- How to show bar chart labels clearly using ChartJS?
- Chart.js :set yAxis point to 0 when there is gap between two dates
- Chart won't draw. Returning a string value not a Number value - Meteor - Chartjs
- Remove Chart.js chart padding
- Chart.js How to synchronize pan and zoom in multiple chats
- how to add second axes to chart JS
- Old data flickering after hover on line graph Chart.js
- Chartjs : Y axis starting with highest datapoint
- Chart.js - displaying multiple line charts using multiple labels
- How to move Chart.js legend?
- Disable stacking for 1 dataset
- chartjs how to apply after animation
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- Position of the x-axis labels is not in sync with the line chart data points
- Line chart: align x axis (timestamps) for multiple data sets
- How to display value labels above graph bars using chart.js
- ChartJS have xAxes labels match data source
- Chartjs-node installation failing
- Chart.js - How to display title in multiple lines?
- Chart.js polar chart