Changing Axis Labels to Millions Formatting for ASP.NET Core

[Savvy Witham]

This question has been answered for other platforms but I do not see an answer for ASP.NET Core.

My current axis labels are of the format "1000000" and I am trying to change them to "1 Million".

This is my current code that I tried by piecing together answers from other platforms but it does not work:

<ejs-chart id="lineContainer" load="window.onChartLoad" title="Row Counts Overall" loaded="labelformatting">
                <e-chart-tooltipsettings enable="true">
                </e-chart-tooltipsettings>


                <e-chart-primaryxaxis valueType="Category" labelIntersectAction="Rotate45" interval=1>
                    <e-majorgridlines width="0"></e-majorgridlines>
                </e-chart-primaryxaxis>


                <e-chart-chartarea>
                    <e-chartarea-border width="0"></e-chartarea-border>
                </e-chart-chartarea>
                <e-series-collection>
                    <e-series dataSource="ViewBag.RowCountOverall" xName='x' yName='yValue' name='MIK' width=1 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">

                    </e-series>
                    <e-series dataSource="ViewBag.RowCountOverall" xName='x' yName='yValue1' name='Gold' width=1 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">

                    </e-series>

                </e-series-collection>
            </ejs-chart>
        </div>

    </div>
        <script type="text/javascript">
            function labelformatting(sender) {
                if (sender.data.axis.orientation == 'vertical') {
                    var label = sender.data.label.Text
                    if (label > 999999) {
                        label = sender.data.label.Text / 100000;
                        sender.data.label.Text = label + "M";
                    } else {
                        label = sender.data.label.Text / 1000;
                        sender.data.label.Text = label + "K";
                    }
                }
            }
        </script>

Help is much appreciated!

[Durga Gopalakrishnan]

Hi Savvy, 

 

Greetings from Syncfusion. 

 

We have validated your reported scenario with attached code snippet. We suggest you to use axisLabelRender event to customize axis labels. We have modified the provided snippet and attached the sample for your reference.  

 

<ejs-chart axisLabelRender="labelRender"> 

</ejs-chart> 

<script type="text/javascript"> 

    function labelRender(sender) { 

        if (sender.axis.name == 'primaryYAxis') { 

            var label = parseInt(sender.text); 

            if (label > 999999) 

                sender.text = label / 1000000 + ' M'; 

            else 

                sender.text = label / 10000 + " K"; 

        } 

       

    } 

</script> 

 

Screenshot 

 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AxisCustom528191378.zip 

 

Please revert us if you have any concerns. 

 

Regards, 

Durga G