HiLo chart with same High and Low values shows blank chart

[Amarender Tangella]

I am using Angular HiLo chart. When the High and Low values for a period are same the  chart is blank and if I hover over the chart I have tooltip setup, it shows the High and Low same values correctly. It's rendering the data on chart but why I couldn't see it? I want a dot to show if the high and low values are same. 

Also, what is the expected behavior if any high and low value are null and undefined? Can we show a dot? You can use any example project you have or use the below code.

https://stackblitz.com/edit/angular-rrydent6?file=src%2Fdatasource.ts

[Durga Gopalakrishnan]

Hi Amarender,

Currently, we do not have built-in support to display a line or dot for identical, null, or undefined values for the low and high points in a Hilo chart. To achieve your desired scenario, we have used an annotation to display a dot for those values. For your reference, we have attached the modified sample and a screenshot.

<ejs-chart [annotations]="annotations">

</ejs-chart>

 

this.chartData.forEach((p: any) => { 

      const missing = p.high == null || p.low == null;  

      const same = p.high !== null && p.low !== null && p.high === p.low;

 

      if (missing || same) {

          const yValue = missing

              ? (p.low ?? p.high ?? 0)

              : p.high; // same-high-low value

 

          this.annotations.push({

              content:

                  '<div style="width:10px;height:10px;background:red;border-radius:50%;"></div>',

              coordinateUnits: 'Point',

              region: 'Chart',

              x: p.x,

              y: yValue

          });

      }

  });

Sample : https://stackblitz.com/edit/angular-rrydent6-pz45js7r

API : https://ej2.syncfusion.com/angular/documentation/api/chart/annotationdirective

Online Demo : https://ej2.syncfusion.com/angular/demos/#/tailwind3/chart/pie-annotation

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Yolanda Phelan]

That's a tricky situation with the HiLo chart! It sounds like the rendering logic might be skipping points where High and Low are identical. I wonder if tweaking the display settings for those points could force a dot to appear. Perhaps a specific style attribute? This reminds me of the challenges in game development, like rendering objects perfectly in Snow Rider 3D. I'd also check the documentation regarding null/undefined handling – it should ideally gracefully skip those points or provide a configurable fallback.

[Durga Gopalakrishnan]

Yolanda,

When the low and high values are identical, the calculated height becomes zero. Consequently, the rendering path for that point does not display anything. This is the default behavior when both values are the same.

Currently, there is no built-in support to display a dot for points where the high and low values are equal. To achieve this, we have used annotations, which are primarily intended for displaying custom text, shapes, or images. Alternatively, you can skip points that are identical, null, or undefined during the chart load event, which is triggered before the chart is rendered.

For your reference, we have attached the updated sample.

<ejs-chart (load)='load($event)'>

</ejs-chart>

 public load(args: any): void {

    args.chart.series[0].dataSource = this.chartData.filter((p: any) => {

      const missing = p.high == null || p.low == null;

      const same = p.high === p.low; 

      return !missing && !same;   // keep only valid points

    });

  }

Sample : https://stackblitz.com/edit/angular-rrydent6-fv1mafdw

Please let us know if you have any concerns.

[ZacharyBromilow]

I’ve been playing block blast lately as a quiet way to unwind, especially because it’s so satisfying to clear rows and keep the board from filling up. For this chart case, showing a marker when High and Low are equal seems much clearer than leaving the data visually blank. Have you found a recommended approach for handling null or undefined values too?

[Santhosh Kumar Anandavadivel]

Hi ZacharyBromilow,

As mentioned in our previous updates, When the High and Low values are identical in a Hilo series, the calculated height becomes zero. Therefore, the point is not visually rendered by default. Currently, we do not have built-in support to display a marker or dot for these points.

However, based on your requirement, we have prepared a solution to highlight such points by customizing the rendered SVG element in the chart’s loaded event. Alternatively, you can use an annotation.

For null or undefined values, you can use the emptyPointSettings property with mode: 'Average' to calculate the missing value based on its neighboring data points and render it with a custom color.

public emptyPointSettings = {

  mode: 'Average',

  fill: 'red'

};

public loaded(args: any): void {

  this.chartData.forEach((data: any, index: number) => {

    const samePoint =

      data.high != null &&

      data.low != null &&

      data.high === data.low;

    if (samePoint) {

      const pointElement = document.getElementById(

        `chart-container_Series_0_Point_${index}`

      );

      if (pointElement) {

        pointElement.setAttribute('fill', 'red');

        pointElement.setAttribute(

          'style',

          'stroke:red;stroke-width:1px;fill:red'

        );

      }

    }

  });

}

<e-series

  [dataSource]="chartData"

  type="Hilo"

  xName="x"

  high="high"

  low="low"

  [emptyPointSettings]="emptyPointSettings">

</e-series>

Sample: N2p6ychd (duplicated) - StackBlitz

Please let us know if you have any concerns.

Regards,
Santhosh Kumar Anadavdivel