Double click on chart obtain the DateTime value from the X axis

[Cesar Smerling]

Hi, in the Chart component we use chartDoubleClick method and we want to draw a strip line in the X value when the double click was made. I'm unable to obtain the X value of the X axis range (X axis is a DateTime) to set the value for the strip line. The chartDoubleClick only gives us the x as pixel not the date value from the range of X. 

There is a way to obtain the value?

[Durga Gopalakrishnan]

Hi Cesar,

As of now, we don’t have support to obtain the data point x and y value in event argument. We have done a workaround to get these values based on pixel position. We have prepared sample based on your requirement. Please check with below snippet and sample.

 public chartDoubleClick(args: IMouseEventArgs): void {

        let point = this.pixelToPoint(args.x, args.y, this.chartObj);

        console.log("Clicked Data Point → X:", point.x, " Y:", point.y);

       

        // Example: add a stripline at the clicked X position

        this.chartObj.primaryXAxis.stripLines = [{

          start: point.x,   // Date object works here

          size: 1,

          sizeType: "Pixel",

          color: 'red',

          text: 'Clicked',

          textStyle: { color: 'red', size: '12px' }

        }];

        this.chartObj.dataBind();

      }

    public pixelToPoint(pixelX: number, pixelY: number, chart: ChartComponent) {

        let xAxis: any = chart.primaryXAxis;

        let yAxis: any = chart.primaryYAxis;

       

        let xCoef = this.pixelToCoefficient(pixelX, xAxis, chart);

        let yCoef = this.pixelToCoefficient(pixelY, yAxis, chart);

       

        let xValue = this.coefficientToValue(xCoef, xAxis);

        let yValue = this.coefficientToValue(1 - yCoef, yAxis); // invert Y since pixels start top→down

       

        // If axis is DateTime, convert number → Date

        if (xAxis.valueType === 'DateTime') {

          xValue = new Date(xValue);

        }

       

        return { x: xValue, y: yValue };

      }

    public coefficientToValue(coefficient, axis) {

        var range = axis.visibleRange;

    var value = range.min + coefficient * (range.delta);

        if (axis.valueType === 'Logarithmic') {

            value = Math.pow(axis.logBase, value);

        }

        return value;

    }

    public pixelToCoefficient(pixel, axis, chart) {

        var length = chart.requireInvertedAxis

            ? (axis.orientation === 'Horizontal' ? axis.rect.height : axis.rect.width)

            : (axis.orientation === 'Horizontal' ? axis.rect.width : axis.rect.height);

     

        var relative = (pixel - (axis.orientation === 'Horizontal' ? axis.rect.x : axis.rect.y)) / length;

        var isInverse = axis.isChart ? axis.isAxisInverse : axis.isInversed;

        return isInverse ? (1 - relative) : relative;

    }

 

Sample : https://stackblitz.com/edit/angular-u6wnmvvh-rlepzvnc

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.