Drag over X axis
DAmrGharieb opened this issue · 3 comments
hi Chris ,
i try to move the point over the x axis but the chart does not response even when i converted the x axis to numbers not dates
and if you can give me a work around to move over date x scale it will be benefit for me
` let options = {
type: 'linear',
data: {
// labels: this.data.map(x => this.datepipe.transform(x[0], 'dd-MMM-yyyy')),
labels: this.data.map(x => x[3]),
datasets: [
// {
// type: 'scatter',
// showLine: true,
// label: 'dca',
// data: this.data.map(x => x[2]),
// dragData: true,
// dragX: true,
// fill: false,
// borderColor: 'red', pointBorderColor: 'red',
// backgroundColor: 'red', pointBackgroundColor: 'red',
// spanGaps: true,
// borderWidth: 3,
// pointHitRadius: 25,
// },
{
label: 'Production',
data: this.data.map(x => x[1]),
dragX: true,
dragData: true,
fill: false,
borderColor: 'green', pointBorderColor: 'green',
backgroundColor: 'green', pointBackgroundColor: 'green',
spanGaps: true,
}
],
},
options: {
dragData: true,
dragX: true,
dragDataRound: 1,
dragOptions: {
showTooltip: true
},
scales: {
yAxes: [
{
id: 'y-axis',
type: 'linear',
ticks: {
reverse: false,
min: 0,
max: this.maxPoint[1] + (this.maxPoint[1] * 3)
},
dragData: true,
},],
xAxes: [
{
id: 'x-axis',
type: 'linear',
ticks: {
reverse: false,
},
dragData: true,
},]
},
plugins: {
pluginDragPoints
},
onDragStart: (e) => {
//console.log(e)
},
onDrag: (e, datasetIndex, index, value) => {
e.target.style.cursor = 'grabbing'
//console.log(datasetIndex, index, value)
},
onDragEnd: (e, datasetIndex, index, value) => {
e.target.style.cursor = 'default'
console.log(datasetIndex, index, value)
// if (index == 0)
// this.p1 = {
// x1: 'Red',
// y1: value
// };
// if (index == 1)
// this.p2 = {
// x1: 'Blue',
// y1: value
// };
},
hover: {
onHover: (e) => {
const point = this.dcaChart.getElementAtEvent(e)
if (point.length) e.target.style.cursor = 'grab'
else e.target.style.cursor = 'default'
}
}
}
}
let canvas: any = document.getElementById('chartJSContainer');
let ctx: any = canvas.getContext('2d');
this.dcaChart = new Chart(ctx, options);`
Hey @DAmrGharieb,
thanks for raising an issue. It looks like your code snippet was copied out of a project of yours, unfortunately I can't (easily) reproduce the issue this way. Would it be possible for you to create a minimum working example showcasing your problem in a jsFiddle or Codepen?
Without digging too deep, I can see that you define your chart as a 'linear' type (which, to the best of my knowledge, doesn't exist in Chart.js), while your datasets seem to be defined as scatters. Are you intending to have a mixed chart? In order to drag along the x-axis your Chart type cannot be of a 'line' type. Please refer to this example if this is the type of chart you are intending to reproduce: https://jsfiddle.net/rqbcs6ep/1/
But that's just guesswork, an actual example would really help me understand your issue here :)
Best Christoph
i will work to produce the issue to jsfiddle .. but the problem is that when the x- axis is a date time the drag plugin doesnot work while when i converted to numbers it work ... i am make an algorithm to estimate the decline with days so i need to have on x asix dates not numbers ... i hope i delivered the idea to you properly
best regards
Amr
Hey @DAmrGharieb,
in another issue, we just came up with a work-around for using a linear x-axis "disguised" as a date-axis:
https://jsfiddle.net/f72kz348/9/
This allows dragging values along both the x and y-axis. I'll close this as answered using this work-around, please re-open in case the issue persist.