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 How to sum the values in a pie chart and display them in the header
- build a javascript callback function from php for chartjs
- Bug : Overlay loading automatically (bootstrap) (laravel 5.2)
- Insert value into a ChartJS with different data label
- Generate bar chart using chart.js and associative array
- ChartJs not working with this JSON Object
- How to assign variables to data passed through a WEB API in Angular?
- convert javascript to dart
- Plotting multiple JSON subobjects in Chart.js Line chart ( with Time as x-axis)
- How to add padding between Graph and X/Y-Scale in chart.js?
- Labels for Nested Doughtnut Chart React ChartJS
- Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"
- Chart.js how to change point radius of scatter charts on resize events?
- How can I specify "per dataset" parsing with Chart.js?
- Sorting arrays and comparing array values php
- How do I use Chart.js and Bootstrap at same time? (various jQuery versions)
- Displaying multiple line graphs on one page
- Horizontal line syncing across multiple charts when hovering with Chart.js in Typescript-react
- Exporting dynamic chartjs to jspdf
- show multiple responsive chart in the same page using chart.js
- How to set vue3-chartjs fixed height?
- Remove Decimal values in Yaxis Linechart -Primefaces
- ChartJS - x axis labels orientation
- How to incorporate chart.js in jsp file
- Chart js - Polar Scatter Chart
- How to save in chart original ID of element in array that is used to build chart data labels?
- Chart.js two Y-Axis, one with negative values
- Chart.js line chart looking as area chart with smooth lines but not sharp
- How use data dynamically in LineChart.js
- Multiple add in multiple sql request?