We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

StackBar graph LabelFormat

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); })
                            )

5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team October 25, 2016 06:40 AM UTC

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  

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  

Please let us know if you have any concern.  

Thanks, 
Dharani. 



FA Felipe Alves October 25, 2016 12:24 PM UTC

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


DD Dharanidharan Dharmasivam Syncfusion Team October 26, 2016 11:08 AM UTC

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. 
 
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. 



FA Felipe Alves November 7, 2016 12:16 PM UTC

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!


DD Dharanidharan Dharmasivam Syncfusion Team November 8, 2016 11:50 AM UTC

Hi Felipe, 
 
Thanks for your update. 
 
Kindly revert us, if you need further assistance. 

Thanks, 
Dharani. 


Loader.
Up arrow icon