1. Home
  2. Forum
  3. ASP.NET Web Forms (Classic)
  4. LabelFormat for thousands or millions

LabelFormat for thousands or millions

Hi,

In code behind I need to set my min and max values for the YAxis which I am able to perform in the DataBound event.

I'd then like to change the label format on my chart to show £xxM when my value is in the millions but £xxK when in the thousands.  The value is always in £ irrespective of locale

Prior to using syncfusion I was using standard DataVisualization.Charting I had the following code which worked

 Private Sub Chart2_DataBound(sender As Object, e As EventArgs) Handles Chart2.DataBound
          Chart2.ChartAreas(0).AxisY.Minimum = MinY
          Chart2.ChartAreas(0).AxisY.Maximum = MaxY
        If Chart2.ChartAreas(0).AxisY.Maximum > 999999 Then
            Chart2.ChartAreas(0).AxisY.LabelStyle.Format = "£0,,.#M"
        Else
            Chart2.ChartAreas(0).AxisY.LabelStyle.Format = "£0,.#K"
        End If
End Sub

I've tried using something similar but this doesn't work.  

 Private Sub Chart1_DataBound(sender As Object, e As EventArgs) Handles Chart1.DataBound
            Chart1.PrimaryYAxis.Range.Min = MinY
            Chart1.PrimaryYAxis.Range.Max = MaxY
        If MaxY > 999999 Then
            Chart1.PrimaryYAxis.LabelFormat = "£0,,.#M"
        Else
            Chart1.PrimaryYAxis.LabelFormat = "£0,.#K"
        End If
    End Sub

I can use C0 as a format but this doesn't seem to allow me to divide by 1,000 or 1000,000. Any suggestions?

6 Replies
DP Deepaa Pragaasam Syncfusion Team January 23, 2018 10:22 AM UTC

Hi Will, 

Thanks for contacting Syncfusion Support. 

We have analyzed your query.  The formatting of the Y Axis Labels can be done using the ChartFormatAxisLabel  Event of the Chart. In the event based on the Values obtained the required data can be displayed in the y Axis Labels. 

Please refer the code snippet below. 

[Chart.aspx.cs] 

AddHandler Me.ChartWebControl1.ChartFormatAxisLabel, AddressOf ChartWebControl1_ChartFormatAxisLabel 
 
Private Sub ChartWebControl1_ChartFormatAxisLabel(ByVal sender As Object, ByVal e As ChartFormatAxisLabelEventArgs) 
                     If e.AxisOrientation = ChartOrientation.Vertical Then 
 
                           If e.Value > 999999 Then 
                                  e.Label = "£" & (e.Value) / 100000 & "M" 
                           Else 
                                  e.Label = "£" & (e.Value) / 1000 & "K" 
                           End If 
                           e.Handled = True 
 
                     End If 
 
              End Sub 

Please refer the output screenshot of the chart Rendered  
 

We have attached the sample for your reference  

To know more about the Axis labels and the formats available please refer the below UG link 

Please let me know if you have any concerns  

Regards, 
Deepaa. 



WH Will Hall January 23, 2018 11:02 AM UTC

Hi Deepaa,

Thanks very much for your swift reply.  Unfortunately, I had not realised there was a retired product ASP.NET WEB FORMS(CLASSIC) and have therefore posted this in the wrong forum.  I am actually using ASP.NET WEB FORMS and so I can't use the sample created for this.  I have tried to find an equivalent event to add a handler in the version I am using but am unable to do so.

Many apologies for selecting the wrong forum.  Is it possible to provide a solution for ASP.NET web forms.

Thanks

WH Will Hall January 23, 2018 09:46 PM UTC

Thanks to your previous post I was able to work out what I needed to do.   Thanks very much for your help and apologies again for posting in the wrong forum.

I've added in the OnClientAxesLabelRendering on the aspx page and then added in a function later on to format the label

<ej:chart runat="server" id="Chart1" OnClientAxesLabelRendering="labelformatting" > 

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

DD Dharanidharan Dharmasivam Syncfusion Team January 24, 2018 04:32 AM UTC

Hi Will, 

Thanks for the update. We are happy to hear that, you have achieved your requirement with ASP.NET Web Forms.  

Kindly revert us, if you need further assistance. 

Dharani. 



KK Kalyan Kumar August 23, 2020 11:48 AM UTC

How to control the format of the Y-axis coordinate value of the Syncfusion angular chart to show k's and M's of value


SM Srihari Muthukaruppan Syncfusion Team August 24, 2020 12:42 PM UTC

Hi Kalyan, 

Thank you for contacting syncfusion support. 

Using axisLabelRender event, you can check for a particular condition and then display the label formats as per your need. Based on your requirement we have prepared a sample for your reference. Please find the below sample, code snippet and screenshot. 

Code snippet: 
app.component.html: 
<ejs-chart (axisLabelRender) = 'axisLabelRender($event)' > 
            <e-series-collection> 
               // add your additional code here 
            </e-series-collection> 
</ejs-chart>
  // add your additional code here

app.component.ts:

// add your additional code here
public axisLabelRender(args : IAxisLabelRenderEventArgs ): void { 
       if (args.axis.name === 'primaryYAxis') { 
          var value = parseInt(args.text); 
          if(value > 1 && value < 99999) { 
            args.text = (value/1000)+'K'; 
          } else if(value > 99999) { 
            args.text = (value / 1000000)+ 'M'; 
          } 
      } 
}; 
  
Screenshot: 
 
 
Regards, 
Srihari M 


Loader.
Up arrow icon