Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sandeep Varma
30
CrossHairDisplay shows random values when cursor is hovered on igx-financial-chart.
posted

The crosshairdisplay does not abbreviate the values which are taken implicitly because I have disabled the y-Axis Abbreviation. I tried abbreviating the value explicitly so that the issue will not occur but crosshairdisplay sometimes shows values which are not present in the data. So, I cannot abbreviate the values which are implicitly taken by the crosshairdisplay. Is there anyway that I can abbreviate the value for crosshairdisplay annotation or Can I only show values on crosshair for the point which are present in the data.

HTML:-

     <igx-financial-chart
               [dataSource]="chartDataSource"
               finalValueAnnotationsVisible="true"
               [finalValueAnnotationsPrecision]="finalValueAnnotationsPrecision"
               [yAxisFormatLabel]="formatY.bind(this)"
                yAxisAbbreviateLargeNumbers="false"
                [crosshairsDisplayMode]="Both"
                [crosshairsAnnotationEnabled]="true"
                [unknownValuePlotting]="DontPlot"
       >
       </igx-financial-chart>

TS:-

constructor(private percentPipe: PercentPipe, private decimalPipe: DecimalPipe) {}

formatY(value, precision= 1) {
    return this.percentPipe.transform(value, this.pipeString);
}

It's pressing issue and need assistance as soon as possible.

Parents
No Data
Reply
  • 34810
    Offline posted

    Hello Sandeep,

    I have been investigating into the behavior you are seeing, and I have a couple of recommendations for you on this matter.

    My best recommendation is to set the crosshairsAnnotationYAxisPrecision property on the IgxFinancialChart. This property works in the same way as the finalValueAnnotationsPrecision property that it appears you are already using.

    Additionally, if you only want the crosshairs in the IgxFinancialChart to go between your data points, you can set the crosshairsSnapToData property to true.

    Please let me know if you have any other questions or concerns on this matter.

Children