Angular pipe in axis labelFormat

[dskLux]

Hello.

Is it possible to use a pipe in the axis property labelFormat?

I am drawing the chart based on a numeric value that I need to display as HH:MM

I have tried using the pipe in the property but it is not displayed correctly:

      this.ChartPrimaryYAxis = {

        title: "Time",

        valueType: "Double",

        labelFormat: "{'value' | ConvertTime}"

      };

Thanks

[Srihari Muthukaruppan]

Hi dskLux,  

Greetings from syncfusion 

We have validated your query. From that, we would like to let you know that we can achieve your requirement by using “axislabelRender” event through which we can customize the axis labels. Based on that we have prepared a sample and also provided the code snippet for your reference.    

    

Sample: https://stackblitz.com/edit/angular-pvfkhb-rvr9eb?file=app.component.ts 

    

Code Snippet:     

[App.component.ts]: 

 

export class AppComponent { 

    public data: Object[] = [ 

        { x: 16, y: 20 }, { x: 17, y: 30 }, 

        { x: 18, y: 70 }, { x: 19, y: 80 }, 

        { x: 20, y: 100 } 

    ]; 

    //Initializing Primary X Axis 

    public primaryXAxis: Object = { 

        title: 'Death Overs', 

        minimum: 15, 

        maximum: 21, 

        interval: 1, 

        majorGridLines: { width: 0 } 

    }; 

    public primaryYAxis: Object = { 

      interval: 20 

    }; 

    public labelRender(args: IAxisLabelRenderEventArgs): void { 

        if (args.axis.name === "primaryYAxis") { 

          let hours: number = 0; 

        let minutes: number = 0; 

        hours = parseInt((args.value/60).toFixed(1)); 

        minutes = args.value % 60; 

        args.text = hours + ':' + minutes; 

        } 

    }; 

    constructor() { 

        //code 

    }; 

 

} 

  

[App.component.html]: 

 

<div class="control-section"> 

        <div align='center'> 

            <ejs-chart style='display:block;' [width]='width' align='center' id='chartcontainer'  

[primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (axisLabelRender)='labelRender($event)'> 

                <e-series-collection> 

                    <e-series [dataSource]='data' type='Column' xName='x' yName='y' fill = '#1e90ff' width=2> </e-series> 

                </e-series-collection> 

            </ejs-chart> 

        </div> 

</div> 

    

 

Screenshot:   

 

   

Let me know, if you have any concerns.    

    

Regards,    

Srihari