Blazor [Preview]
Demos
Support
Forum
Download
Search results

Tooltip

The range navigator supports tooltips for sliders. Sliders are used to select data at a range in the range navigator. Tooltips display the selected start and end values.

Enable Tooltip

The tooltip is useful to show the selected data. You can enable tooltip by setting the Enable property as true in tooltip object.

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

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorRangeTooltipSettings Enable="true" DisplayMode="TooltipDisplayMode.Always">
    </RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@DataSource" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close" ></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {
    
    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;
        
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { Date = new DateTime(2005, 01, 01), Close = 21,   },
        new Data { Date = new DateTime(2006, 01, 01), Close = 24, },
        new Data { Date = new DateTime(2007, 01, 01), Close = 36,   },
        new Data { Date = new DateTime(2008, 01, 01), Close = 38,   },
        new Data { Date= new DateTime(2009, 01, 01), Close = 54,   },
        new Data { Date = new DateTime(2010, 01, 01), Close = 57,   },
        new Data { Date = new DateTime(2011, 01, 01), Close = 70,   }
    };
}

Enable Tooltip

Customization

Tooltips can be customized using the following properties:

  • Enable: Customizes the visibility of the tooltip.
  • DisplayMode: Customizes the display mode of the tooltip.
  • Fill: Customizes the background color of the tooltip.
  • Opacity: Customizes the opacity of the tooltip.
  • TextStyle: Customizes the Size, Color, FontFamily, FontStyle, FontWeight, TextAlignment and TextOverflow of the tooltip text.
tooltip-custom.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorRangeTooltipSettings Enable="true" Fill="red" Opacity="0.6" DisplayMode="TooltipDisplayMode.Always">
        <RangeNavigatorTooltipTextStyle Color="blue" Size="12px" FontStyle="italic"></RangeNavigatorTooltipTextStyle>
    </RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close" 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 Date;
        public double Close;
        
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
        new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
        new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
        new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
        new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
        new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
        new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
    };
}

Customization

Label Format

You can format and parse the date to all globalize format using LabelFormat property in an axis.

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

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorRangeTooltipSettings Enable="true" DisplayMode="TooltipDisplayMode.Always" Format="y/M/d">
    </RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close" ></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {
    
    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;
        
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
        new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
        new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
        new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
        new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
        new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
        new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
    };
}

Label Format

The following table describes the result of applying some common date time formats to the LabelFormat property

Label Value Label Format Property Value Result Description
new Date(2000, 03, 10) EEEE Monday The Date is displayed in day format
new Date(2000, 03, 10) yMd 04/10/2000 The Date is displayed in month/date/year format
new Date(2000, 03, 10) MMM Apr The Shorthand month for the date is displayed
new Date(2000, 03, 10) hm 12:00 AM Time of the date value is displayed as label
new Date(2000, 03, 10) hms 12:00:00 AM The Label is displayed in hours:minutes:seconds format
Previous
Next