StackBar graph LabelFormat

[Felipe Alves]

I'm getting some trouble with StackedBar graph, i didn't find how to format the Y axis and tooltip values when mouse over to show correctly.

For eg., I'm trying to format the numbers from 378165 to 378.165. I wanna show numbers at hundred, thousant, and if necessary with comma

Something like .ToString("#,##");

Image in attachment.

code:

  

                            @(Html.EJ().Chart("containerStackedChart")

                                .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Gerências")).MajorGridLines(mr => mr.Visible(false)))

                                .PrimaryYAxis(pr => pr.Range(ra => ra.Max(400000).Min(0).Interval(ViewBag.Intervalo)).Title(tl => tl.Text("Unidades")))//tried show number formated here

                                .CommonSeriesOptions(cr => cr.Type(SeriesType.StackingColumn).EnableAnimation(true).Tooltip(tt => tt.Visible(true)

                                .Format("#series.name#  <br/> #point.x# : #point.y# Unidades"))) // tried show number formated here

                                .Series(sr =>

                                {

                                    sr.Points(pt =>

                                    {

                                        for (int i = 0; i < ViewBag.Tamanho; i++)

                                        {

                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresFaturado[i]).Add();

                                        }

                                    }).Name("Faturado").Fill("#2A80B9").Add();

                                    sr.Points(pt =>

                                    {

                                        for (int i = 0; i < ViewBag.Tamanho; i++)

                                        {

                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresEmCarteira[i]).Add();

                                        }

                                    }).Name("Em Carteira").Fill("#2ECD71").Add();

                                    sr.Points(pt =>

                                    {

                                        for (int i = 0; i < ViewBag.Tamanho; i++)

                                        {

                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresMetas[i] - ViewBag.ValoresFaturado[i] - ViewBag.ValoresEmCarteira[i]).Add();

                                            //pt.X(ViewBag.CodGerencias[i]).Y(22333).Add();

                                        }

                                    }).Name("Meta").Fill("#E94649").Add();

                                })

                                .IsResponsive(true)

                                .Locale("pt-BR")

                                .CanResize(true)

                                .Load("loadTheme")

                                .Title(tt => tt.Text("Gráfico Meta Mensal"))

                                .Size(sz => sz.Height("300"))

                                .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); })

                            )

[Dharanidharan Dharmasivam]

Hi Felipe,  

Thanks for using Syncfusion products.  

We have analyzed the screenshot provided by you. We can achieve your requirement by setting appropriate culture value to the Localeproperty of chart.  

We have prepared a simple sample for this requirement and it can be downloaded from the following link  

LocalizationDemo  

Please refer the following code snippet to achieve this  

[CSHTML]  

  

<script src="~/Scripts/ej/i18n/ej.culture.es-ES.min.js"></script>  

<div id = "ControlRegion">  

          <div>  

              @(Html.EJ().Chart("containerStackedChart")  

                                 .Locale("es-ES")     //For localizing labels to a specific culture  

  

                                //Display numbers in y-axis based on localized settings  

                                .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades")))  

                                  

                                //. . . Other code for Chart                              

  

              )   

          </div>    

</div>  

Note: Tooltip text will be localized automatically based on axis labels  

  

[Screenshot]  

Chart with localized labels and tooltip  

   

Following documentation link explains how to localize Syncfusion widgets  

https://help.syncfusion.com/aspnetmvc/core-concepts#localization  

Please let us know if you have any concern.  

Thanks, 

Dharani. 

[Felipe Alves]

Thank you very much!, but only the tooltip is still not showing properly. I tried localetexts css and set configuration at <system.web> but it's not working yet.

New image in attachment.

Some changes in code:

 @(Html.EJ().Chart("containerStackedChart")

                                .Locale("es-ES")

                                .PrimaryXAxis(pr => pr.Title(tl => tl.Text("")).MajorGridLines(mr => mr.Visible(false)))

                                .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades")).Range(ra => ra.Max(ViewBag.EixoY).Min(0).Interval(ViewBag.Intervalo)))

                                .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true).Tooltip(tt => tt.Visible(true)

                                .Format("#series.name#  <br/> #point.x# : #point.y# Unidades")))

                                .Series(sr =>

                                 {

...

                                 }

                                .IsResponsive(true)

                                .Enable3D(false)

                                .SideBySideSeriesPlacement(false)

                                .CanResize(true)

                                .Load("loadTheme")

                                .Title(tt => tt.Text("Gráfico Meta Mensal"))

                                .Size(sz => sz.Height("300"))

                                .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); })

...

<script src="~/Scripts/ej/ej.web.all.js"></script> <!-- SyncFusion Charts -->

<script src="~/Scripts/ej/i18n/ej.culture.es-ES.js"></script>

<script src="~/Scripts/ej/i18n/localetexts/ej.localetexts.es-ES.js"></script>

Attachment: culture_d9d4201f.zip

[Dharanidharan Dharmasivam]

Hi Felipe, 

Thanks for your update. 

 

We have tried to replicate the tooltip issue with the provided code snippet, but we can’t able to reproduce it. Kindly find the code snippet below, 

Code Snippet: 

ASP.NET MVC: 

@(Html.EJ().Chart("containerStackedChart") 

         .Locale("es-ES")    

         .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades"))) 

         .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Gerências")).MajorGridLines(mr => mr.Visible(false))) 

         .CommonSeriesOptions(cr => cr.Type(SeriesType.StackingColumn).EnableAnimation(true) 

.Tooltip(tt => tt.Visible(true).Format("#series.name#  <br/> #point.x# : #point.y# Unidades")))  

         .Series(sr =>{sr.Points(pt => 

                          { 

                           pt.X("Ger 2").Y(900000).Add(); 

                           pt.X("Ger 4").Y(800020).Add(); 

                           pt.X("Ger 6").Y(800080).Add(); 

                           pt.X("Ger 8").Y(700025).Add(); 

                           }).Name("Faturado").Fill("#2A80B9").Add(); 

 

                       sr.Points(pt => 

                       { 

                          pt.X("Ger 2").Y(190000).Add(); 

                          pt.X("Ger 4").Y(220006).Add(); 

                          pt.X("Ger 6").Y(190004).Add(); 

                          pt.X("Ger 8").Y(250000).Add(); 

                       }).Name("Em Carteira").Fill("#2ECD71").Add(); 

 

                       sr.Points(pt => 

                       { 

                          pt.X("Ger 2").Y(250000).Add(); 

                          pt.X("Ger 4").Y(140005).Add(); 

                          pt.X("Ger 6").Y(190000).Add(); 

                          pt.X("Ger 8").Y(220000).Add(); 

                        }).Name("Meta").Fill("#E94649").Add(); 

          }) 

                                 

          .IsResponsive(true) 

          .Enable3D(false) 

          .SideBySideSeriesPlacement(false)                              

          .CanResize(true) 

          .Load("loadTheme") 

          .Title(tt => tt.Text("Gráfico Meta Mensal")) 

          .Size(sz => sz.Height("300")) 

          .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); }) 

) 

Screenshot:  

 

For your reference we have attached the sample. Kindly find the sample from below location. Can you please check whether the locale for chart is set more than once from your side. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127067/ze/LocaleDemo2124862635  

Since we can’t able to reproduce the mentioned issue, kindly revert us by modifying the attached sample or provide us your sample with replication steps. So that we can able to provide the solution sooner. 

Thanks, 

Dharani. 

[Felipe Alves]

Hello guys,

I had other graphs in the page, and to work properly i set the property ".Locale("pt-BR")" to all my graphs.

Thanks for the help!

[Dharanidharan Dharmasivam]

Hi Felipe, 

 

Thanks for your update. 

 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.