#chartjs-plugin-dragdata, Merging bubble chart with Bar chart causing issue not to drag bubble in X-Axis direction

[rahuljetli]

Hey there,

I'm trying to merge three charts together and making a bar chart, bubble and line chart. But once I merged it with Bar chart bubble is not draggable in X-Axis. But if I removed Bar chart only then I am able to drag bubble anywhere in the canvas.

Code Sample:

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

myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    datasets: [
                        {
                            type: 'bar',
                            label: 'Bar DataSet',
                            data: [10, 20],
                            dragData: false,
                            barPercentage: 0.7,
                            order: 2                            
                        },
                        {
                            label: 'Bubble DataSet',
                            data: [{x:10,y: 20,r: 30},{x: 20,y: 30,r: 40}]
                            type: 'bubble',
                            dragData: true,
                            dragX: true,
                            order: 1
                        },
                        {
                            label: 'Line Dataset',
                            data: [{ x: 10,y: 20}, { x: 15, y: 10}],
                            type: 'line',
                            dragData: false,
                            borderWidth: 1,        
                            pointRadius: 25,
                            pointHoverRadius: 25,
                            order: 3
                        }
                    ],
                }
            });

[chrispahm]

Hey there,

sorry but I don't really get what you are trying to achieve here. Could you provide a sample as a jsFiddle, Codepen (or similar) so I can have a look?

Thanks Christoph

[rahuljetli]

Hey there,

sorry but I don't really get what you are trying to achieve here. Could you provide a sample as a jsFiddle, Codepen (or similar) so I can have a look?

Thanks Christoph

Hi Chris, Thanks for the reply, You can see my code here CodePen

[chrispahm]

Sorry for taking me so long! So the issue is that your 'base' chart is a bar chart. Bar charts are (naturally) not meant to be dragged along the x-axis. If you change your 'base' chart to the type 'bubble', the x-axis dragging works, however then your bar chart disappears. I don't really have a solution for this, however I'm certain this is really an edge case. For which use case would you have these 3 chart types displayed on top of each other? Probably there's another way how this can be achieved.

Best Christoph

[chrispahm]

Hey there,

I just realized that your example can be easily fixed by assigning the bubble dataset to it's own linear x-axis. This way, you can drag the bubbles around as you like, while having the other datasets being displayed the same way as before. You can even hide the additional axis so no-one will notice:

https://jsfiddle.net/rqbcs6ep/3/

This should resolve this issue I guess, please re-open if the issue persists.