Search results

Logarithmic Axis

Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numeric values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).

log.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
     <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
     </ChartPrimaryXAxis>
  
     <ChartPrimaryYAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Logarithmic">
     </ChartPrimaryYAxis>
  
     <ChartSeriesCollection>
         <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
         </ChartSeries>                                                                       
     </ChartSeriesCollection>
</EjsChart>    
   
@code{
     public class ChartData
        {
            public DateTime XValue;
            public double YValue;
        }

      public List<ChartData> Data =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100   },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200   },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500   },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000  },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000  },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
        };
}

Logarithmic Axis

Range

Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using Minimum, Maximum and Interval property of the axis.

range.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis Minimum="100" Maximum="10000" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Logarithmic">
        </ChartPrimaryYAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
            </ChartSeries>                                                                       
        </ChartSeriesCollection>
</EjsChart>

@code{
     public class ChartData
        {
            public DateTime XValue;
            public double YValue;
        }

      public List<ChartData> Data =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100   },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200   },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500   },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000  },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000  },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
        };
}

Logarithmic Base

Logarithmic base can be customized by using the LogBase property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.

base.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
   <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
   </ChartPrimaryXAxis>

   <ChartPrimaryYAxis LogBase="2" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Logarithmic">
   </ChartPrimaryYAxis>

   <ChartSeriesCollection>
      <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
      </ChartSeries>
   </ChartSeriesCollection>
</EjsChart>

@code{
     public class ChartData
        {
            public DateTime XValue;
            public double YValue;
        }

      public List<ChartData> Data =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100   },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200   },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500   },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000  },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000  },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
        };
}

Logarithmic Base

Logarithmic Interval

Logarithmic axis Interval can be customized by using the Interval property of the axis. When the logarithmic base is 10 and logarithmic Interval is 2, then the axis labels are placed at an Interval of 102. The default value of the Interval is 1.

interval.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis Interval="2" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Logarithmic">
        </ChartPrimaryYAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
            </ChartSeries>                                                                       
        </ChartSeriesCollection>
</EjsChart>

@code{
     public class ChartData
        {
            public DateTime XValue;
            public double YValue;
        }

      public List<ChartData> Data =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100   },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200   },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500   },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000  },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000  },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
        };
}

Label Format

Logarithmic Label Format

Logarithmic labels can be formatted by using the LabelFormat property. Logarithmic labels supports all globalize format.

label-format.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
    <ChartPrimaryXAxis  ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime">
    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis LabelFormat="P" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Logarithmic">
    </ChartPrimaryYAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
     public class ChartData
        {
            public DateTime XValue;
            public double YValue;
        }

      public List<ChartData> Data =  new List<ChartData> {
            new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100   },
            new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200   },
            new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500   },
            new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000  },
            new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000  },
            new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 90000 },
            new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 99000 },
        };
}

The following table describes the result of applying some commonly used label formats on logarithmic values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Value is rounded to 1 decimal place
1000 n2 1000.00 The Value is rounded to 2 decimal place
1000 n3 1000.000 The Value is rounded to 3 decimal place
0.01 p1 1.0% The Value is converted to percentage with 1 decimal place
0.01 p2 1.00% The Value is converted to percentage with 2 decimal place
0.01 p3 1.000% The Value is converted to percentage with 3 decimal place
1000 c1 $1000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Custom Label Format

Axis also supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.

custom.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Double">
    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis LabelFormat="${value}K">
    </ChartPrimaryYAxis>  

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
        </ChartSeries>                                                                                
    </ChartSeriesCollection>
</EjsChart>

@code{
     public class ChartData
        {
            public double XValue;
            public double YValue;
        }
      public List<ChartData> Data =  new List<ChartData>
	  {
            new ChartData { XValue = 10, YValue = 21 },
            new ChartData { XValue = 20, YValue = 24 },
            new ChartData { XValue = 30, YValue = 36 },
            new ChartData { XValue = 40, YValue = 38 },
            new ChartData { XValue = 50, YValue = 54 },
            new ChartData { XValue = 60, YValue = 57 },
            new ChartData { XValue = 70, YValue = 70 },
        };
}

See Also