Search results

Labels in Blazor Range Selector component

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

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

@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.Blazor.Charts

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

@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.Blazor.Charts

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

@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.Blazor.Charts

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

@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.Blazor.Charts

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

@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