How can I locale tooltips, number label format and 2 decimal places to pt-BR in charts asp core net?

[Roberto]

Hi,

I am creating a pie chart and a bar chart, and in both cases I would like to set the numbers to pt-BR and with two decimal places in the axis and tooltips. I looked at the examples, but it didn't work. Could anyone help?

I'm using asp core net 5.0

 <ejs-accumulationchart id="containerChart" selectionMode="Point" title="Rastreio" load="load" loaded="loaded" animationComplete="animation" textRender="textRender" locale="pt-BR">

                        <e-accumulationchart-tooltipsettings enable="true">

                        </e-accumulationchart-tooltipsettings>

                        <e-accumulationchart-legendsettings toggleVisibility=false position="Right" height="28%" width="20%">

                        </e-accumulationchart-legendsettings>

                        <e-accumulation-series-collection>

                            <e-accumulation-series xName="x" yName="y" name="Transtorno" innerRadius="40%">

                                <e-accumulationseries-datalabel name="${point.y}" visible="true">

                                    <e-font fontWeight="600" color="white"></e-font>

                                </e-accumulationseries-datalabel>

                            </e-accumulation-series>

                        </e-accumulation-series-collection>

                    </ejs-accumulationchart>

two places decimal, but not locale to pt-BR, the numbers is showing with decimal seperator point and not comma.

 <ejs-chart id="lineContainer" load="window.onChartLoad" title="" locale="pt-BR">

                        <e-chart-chartarea>

                            <e-chartarea-border width="0"></e-chartarea-border>

                        </e-chart-chartarea>

                        <e-chart-legendsettings visible="false"></e-chart-legendsettings>

                        <e-chart-tooltipsettings enable="true">

                        </e-chart-tooltipsettings>

                        <e-chart-primaryxaxis valueType="Category" title="Transtorno">

                        </e-chart-primaryxaxis>

                        <e-chart-primaryyaxis title="%" labelFormat="###.00 %">

                        </e-chart-primaryyaxis>

                        <e-series-collection>

                            <e-series xName="x" yName="y" name="Transtorno" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar">

                                <e-series-marker>

                                    <e-series-datalabel position="Top" visible="true">

                                        <e-font color="#ffffff" fontWeight="600"></e-font>

                                    </e-series-datalabel>

                                </e-series-marker>

                            </e-series>                          

                        </e-series-collection>

                    </ejs-chart>

[Srihari Muthukaruppan]

Hi Roberto, 

  

Based on your requirement as of now we suggest you to use the axisLabelRender event for customizing axis labels in chart, textRender event to customize the datalable in chart and accumulation chart. And we can customize the tooltip using tooltipRender event in the chart and accumulation chart to achieve your requirement. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot for your reference. 

  

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

  

Code Snippet: 

<ejs-accumulationchart id="containerChart" textRender="pietextRender" tooltipRender="pietooltipRender" selectionMode="Point" title="Rastreio"> 

    // add your additional code here 

</ejs-accumulationchart> 

  

<ejs-chart id="lineContainer" axisLabelRender="labelRender" textRender="textRender" tooltipRender="tooltipRender" title="UK Trade in Food Groups - 2015"> 

    // add your additional code here 

</ejs-chart> 

  

<script> 

    labelRender = function (args) { 

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

            var result = args.text.replace(".", ","); 

            args.text = result; 

        } 

    }; 

    textRender = function (args) { 

            var result = args.text.replace(".", ","); 

            args.text = result; 

    } 

    tooltipRender = function (args) { 

        var y = args.text.split(':')[1].replace('.', ','); 

        var x = args.text.split(':')[0]; 

        args.text = x + " : " + y; 

    } 

    pietextRender = function (args) { 

       var text = parseFloat(args.text).toFixed(2); 

        var result = text.replace(".", ","); 

        args.text = result; 

    } 

    pietooltipRender = function (args) { 

        var text = (args.text.split(':')[1]).replace('<b>', ' ').replace('</b>', ' '); 

        var newText = parseFloat(text).toFixed(2); 

        var y = newText.replace('.',','); 

        var x = args.text.split(':')[0]; 

        args.text = x + " : <b>" + y + "</b>"; 

    } 

</script> 

  

  

Screenshot: 

  

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

[Roberto]

Hi,

Perfect, it was what I was needing.

Thanks.

[Srihari Muthukaruppan]

Hi Roberto,    

    

Most welcome.  

   

We are glad to know that the issue has been resolved. Kindly get in touch with us, if you require further assistance. We are always happy in assisting you.     

     

Thanks,     

Srihari M