Search results

Labels

Multilevel labels

The second level labels for the range navigator can be enabled by setting the EnableGrouping property to true. This is restricted to date-time axis alone.

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

<EjsRangeNavigator DataSource="@StockChart" XName="X" YName="Y" LabelPosition="AxisPosition.Outside" 
                   EnableGrouping="true" IntervalType="RangeIntervalType.Quarter" Value="@Value" 
                   ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
</EjsRangeNavigator>

@code {
    
    DateTime[] Value = new DateTime[] { new DateTime(2005, 11, 01), new DateTime(2006, 01, 01) };
    
    public class Data
    {
        public DateTime X;
        public double Y;
        public double Y1;
    }
    
    public List<Data> StockChart = new List<Data> {
            new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
            new Data { X = new DateTime(2005, 03, 01), Y = 24, Y1 = 44 },
            new Data { X = new DateTime(2005, 05, 01), Y = 36, Y1 = 48 },
            new Data { X = new DateTime(2006, 07, 01), Y = 38, Y1 = 50 },
            new Data { X = new DateTime(2006, 08, 01), Y = 54, Y1 = 66 },
            new Data { X = new DateTime(2006, 09, 01), Y = 57, Y1 = 78 },
            new Data { X = new DateTime(2006, 11, 01), Y = 70, Y1 = 84 }
        };
}

Multilevel labels

Grouping

The second level axis labels can be grouped by using GroupBy property with the following interval types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds
group.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator DataSource="@StockDetails" XName="X" YName="Y" Value="@Value" 
                   ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" 
                   LabelPosition="AxisPosition.Inside" EnableGrouping="true" GroupBy="RangeIntervalType.Years" 
                   IntervalType="RangeIntervalType.Quarter">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
</EjsRangeNavigator>

@code {

    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
    
    public class Data
    {
        public DateTime X;
        public double Y;
        public double Y1;
    }
    
    public List<Data> StockDetails = new List<Data> {
        new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24, Y1 = 44 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36, Y1 = 48 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38, Y1 = 50 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54, Y1 = 66 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57, Y1 = 78 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70, Y1 = 84 }
    };
}

Grouping

Smart labels

The LabelIntersectAction property is used to avoid overlapping of labels.

The following code sample shows setting the LabelIntersectAction property to Hide.

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

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" 
                   LabelFormat="y/M/d" LabelIntersectAction="RangeLabelIntersectAction.Hide">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@DataSource" XName="X" Type="RangeNavigatorType.StepLine" 
                              YName="Y" Width="2"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {

    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
    
    public class Data
    {
        public DateTime X;
        public double Y;
        public double Y1;
    }
    
    public List<Data> DataSource = new List<Data> {
        new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24, Y1 = 44 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36, Y1 = 48 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38, Y1 = 50 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54, Y1 = 66 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57, Y1 = 78 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70, Y1 = 84 }
    };
}

Smart labels

Position

By default, the labels can be placed at outside of the range navigator. You can place the labels inside the range navigator using the LabelPosition property.

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

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" LabelPosition="AxisPosition.Inside">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="X" Type="RangeNavigatorType.StepLine" 
                              YName="Y" ></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {
    
    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
    
    public class Data
    {
        public DateTime X;
        public double Y;
        public double Y1;
    }
    
    public List<Data> StockDetails = new List<Data> {
            new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
            new Data { X = new DateTime(2006, 01, 01), Y = 24, Y1 = 44 },
            new Data { X = new DateTime(2007, 01, 01), Y = 36, Y1 = 48 },
            new Data { X = new DateTime(2008, 01, 01), Y = 38, Y1 = 50 },
            new Data { X = new DateTime(2009, 01, 01), Y = 54, Y1 = 66 },
            new Data { X = new DateTime(2010, 01, 01), Y = 57, Y1 = 78 },
            new Data { X = new DateTime(2011, 01, 01), Y = 70, Y1 = 84 }
        };
}

Label positioning

Labels customization

The font size, color, family, etc. can be customized using the LabelStyle property.

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

<EjsRangeNavigator DataSource="@StockDetails" XName="X" YName="Y" Value="@Value"  LabelFormat="MMM"
                       IntervalType="RangeIntervalType.Months" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
        <RangeNavigatorLabelStyle Color="red" Size="10"></RangeNavigatorLabelStyle>
</EjsRangeNavigator>

@code {

    DateTime[] Value = new DateTime[] { new DateTime(2005, 11, 01), new DateTime(2006, 01, 01) };

    public class Data
    {
        public DateTime X;
        public double Y;
        public double Y1;
    }

    public List<Data> StockDetails = new List<Data> {
        new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
        new Data { X = new DateTime(2005, 03, 01), Y = 24, Y1 = 44 },
        new Data { X = new DateTime(2005, 05, 01), Y = 36, Y1 = 48 },
        new Data { X = new DateTime(2006, 07, 01), Y = 38, Y1 = 50 },
        new Data { X = new DateTime(2006, 08, 01), Y = 54, Y1 = 66 },
        new Data { X = new DateTime(2006, 09, 01), Y = 57, Y1 = 78 },
        new Data { X = new DateTime(2006, 11, 01), Y = 70, Y1 = 84 }
    };
}

Labels customization