Scatter points locked to the left edge and dragged off bottom

[mortac8]

https://codepen.io/mortac8/pen/LYNYJdj

If I run this code in jsfiddle or codepen it works but if I run it straight from an HTML page deployed on a web server, I get problems in that my point can be dragged off the bottom of the chart or locked to X=0. Any ideas would be appreciated. This one is driving me crazy.

Attached is a video of the problem I see. It seems to be similar to what was mentioned in #39 and #35 .

I am using Chart.js 2.9.3 and dragdata 1.0.2 here in the attached examples. If I revert to dragdata 0.0.5, this specific problem goes away for me on a barebones example like the inline code below but then I can't drag points on my plot in our production app.

<script src="Chart-2.9.3.js"></script>
<script src="chartjs-plugin-dragdata-1.0.2.js"></script>
<canvas id="inputChartGray" width=200 height=200></canvas>
<script>
    function createInputChart(chartElement, data){
        let inputScatterChart = new Chart(chartElement, {
            type: "scatter",
            data: {
                datasets: [
                {
                    label: "points",
                    showLine: true,
                    pointRadius: 5,
                    data: data,
                    type: "scatter"
                }]
            },
            options: {
                responsive: false,
                dragData: true,
                dragX: true
            }
        });
        return inputScatterChart;
    }

    initCharts();

    function initCharts(){
        let data = [{ x: 0, y: 0 }, { x: 65, y: 65 }, { x: 255, y: 255}];
        let inputChartGrayElement = document.getElementById("inputChartGray");
        let inputGrayChart = createInputChart(inputChartGrayElement, data);
    }
</script>

[chrispahm]

Hey,

thanks for raising an issue. The reason why this works in the codepen and not when running your HTML directly is that the codepen references the latest version of the plugin (v1.1.3), which includes the fixes from the issues you found:

https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js

while in your code you seem to use an outdated version (v.1.0.2).

I figure the confusion might have come through 1.0.2 being the latest release on the release page? Sorry, but I don't update them regularly as most people that use a bundler (Rollup/Webpack) for creating their production sites install their packages through npm/yarn.

In any case, you have the following options to fix your problem: 1) If you don't bundle your site, you could just use a CDN directly

 <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@1.1.3/dist/chartjs-plugin-dragdata.min.js"></script>

2) If you do, update to the latest version of the plugin using

npm update chartjs-plugin-dragdata

3) You can always pull the latest versions of the plugin from the dist folder of the master branch

Hope this helps

[mortac8]

Thanks Christopher! That was my problem. Yes, I used 1.0.2 because that was the latest released / tagged version.