1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to make horizontal scrollbar on line chart?

How to make horizontal scrollbar on line chart?

Hi,

I'm testing some new things out because we might going to use Syncfusion for our new system. I'm trying to create a scrollbar on my chart so the time period are selectable(zoomable) like its given on this website with title "Scrollbar on zooming";

https://www.syncfusion.com/blazor-components/blazor-charts/interactive-chart

How can i achieve this? This is the code I've got now:

@page "/fetchdata"

@using DataPortal.Data
@using Syncfusion.Blazor.Charts
@inject NavigationManager NavigationManager
<div class="control-section">
    <SfChart Title="">
        <ChartEvents Load="ChartLoad" />
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate90">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartZoomSettings EnableScrollbar="true"></ChartZoomSettings>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@SplineData" Name="Vessel 1" XName="xValue" Width="2"
                         Opacity="1" YName="yValue" Type="ChartSeriesType.Spline">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@SplineData" Name="Vessel 2" XName="xValue" Width="2"
                         Opacity="1" YName="yValue1" Type="ChartSeriesType.Spline">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@SplineData" Name="Vessel 3" XName="xValue" Width="2"
                         Opacity="1" YName="yValue2" Type="ChartSeriesType.Spline">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartAnnotations>
            <ChartAnnotation X="Sun" Y="8" CoordinateUnits="Units.Point">
            </ChartAnnotation>
            <ChartAnnotation X="Tue" Y="38" CoordinateUnits="Units.Point">
            </ChartAnnotation>
        </ChartAnnotations>
    </SfChart>
</div>
@code{
    public class SplineChartData
    {
        public string xValue { get; set; }
        public double yValue { get; set; }
        public double yValue1 { get; set; }
        public double yValue2 { get; set; }
    }
    public List<SplineChartData> SplineData = new List<SplineChartData>
{
        new SplineChartData { xValue = "January 2019", yValue = 1000, yValue1 = 950, yValue2 = 900 },
        new SplineChartData { xValue = "February 2019", yValue = 990, yValue1 = 950, yValue2 = 850 },
        new SplineChartData { xValue = "March 2019", yValue = 980, yValue1 = 960, yValue2 = 800 },
        new SplineChartData { xValue = "April 2019", yValue = 970, yValue1 = 960, yValue2 = 750 },
        new SplineChartData { xValue = "May 2019", yValue = 960, yValue1 = 970, yValue2 = 700 },
        new SplineChartData { xValue = "June 2019", yValue = 950, yValue1 = 970, yValue2 = 650 },
        new SplineChartData { xValue = "July 2019", yValue = 940, yValue1 = 980, yValue2 = 600 },
        new SplineChartData { xValue = "August 2019", yValue = 930, yValue1 = 980, yValue2 = 550 },
        new SplineChartData { xValue = "September 2019", yValue = 920, yValue1 = 990, yValue2 = 500 },
        new SplineChartData { xValue = "October 2019", yValue = 910, yValue1 = 990, yValue2 = 450 },
        new SplineChartData { xValue = "November 2019", yValue = 900, yValue1 = 1000, yValue2 = 400 },
        new SplineChartData { xValue = "December 2019", yValue = 890, yValue1 = 1000, yValue2 = 350 },
        new SplineChartData { xValue = "January 2020", yValue = 1000, yValue1 = 950, yValue2 = 900 },
        new SplineChartData { xValue = "February 2020", yValue = 990, yValue1 = 950, yValue2 = 850 },
        new SplineChartData { xValue = "March 2020", yValue = 980, yValue1 = 960, yValue2 = 800 },
        new SplineChartData { xValue = "April 2020", yValue = 970, yValue1 = 960, yValue2 = 750 },
        new SplineChartData { xValue = "May 2020", yValue = 960, yValue1 = 970, yValue2 = 700 },
        new SplineChartData { xValue = "June 2020", yValue = 950, yValue1 = 970, yValue2 = 650 },
        new SplineChartData { xValue = "July 2020", yValue = 940, yValue1 = 980, yValue2 = 600 },
        new SplineChartData { xValue = "August 2020", yValue = 930, yValue1 = 980, yValue2 = 550 },
        new SplineChartData { xValue = "September 2020", yValue = 920, yValue1 = 990, yValue2 = 500 },
        new SplineChartData { xValue = "October 2020", yValue = 910, yValue1 = 990, yValue2 = 450 },
        new SplineChartData { xValue = "November 2020", yValue = 900, yValue1 = 1000, yValue2 = 400 },
        new SplineChartData { xValue = "December 2020", yValue = 890, yValue1 = 1000, yValue2 = 350 },
    };
    string CurrentUri;
    void ChartLoad(ILoadedEventArgs Args)
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            Args.Theme = ChartTheme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            Args.Theme = ChartTheme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            Args.Theme = ChartTheme.Bootstrap4;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            Args.Theme = ChartTheme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            Args.Theme = ChartTheme.HighContrast;
        }
        else
        {
            Args.Theme = ChartTheme.Bootstrap4;
        }
    }
}


Thanks in advance!


2 Replies
SS Sarasilmiya Shahul Hameed Syncfusion Team May 28, 2020 01:14 PM UTC

From: Schutte, Niels
Sent: Thursday, May 28, 2020 7:22 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 154668, How to make horizontal scrollbar on line chart?, has been created. 
Hi,

To be honest we’re still doing the Basic Engineering of the system. Currently I’m trying to create a chart that I can add into my mock-ups. I have a question about that and posted this on the forum:

https://www.syncfusion.com/forums/154668/how-to-make-horizontal-scrollbar-on-line-chart 
 
Here I would like to add a horizontal scrollbar so users can select different time periods and zoom in on those. 

I’m also wondering if we can extend our trial version with a month or two so we can test other things aswell. 
 
Met vriendelijke groet, 


SM Srihari Muthukaruppan Syncfusion Team May 29, 2020 12:03 PM UTC

Hi Niels, 
  
Please find the response for the below queries. 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Query #1: How to make horizontal scrollbar on the line chart? 
  
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using zoomFactor and zoomPosition property in the axis of the chart. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot.  
   
   
Code Snippet:  
 // add your additional code here  
<ChartPrimaryXAxis Title="Years" ZoomFactor="0.5" ZoomPosition="0.5" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Skeleton="yMMM" EdgeLabelPlacement="EdgeLabelPlacement.Shift"> 
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines> 
            <ChartAxisScrollbarSettings Enable="true"></ChartAxisScrollbarSettings> 
        </ChartPrimaryXAxis> 
// add your additional code here  
   
Screenshot:  
 
  
Query #2: I’m also wondering if we can extend our trial version with a month or two so we can test other things as well? 
  
We have forwarded your request to our sales team and they will contact you at the earliest. Also, you can directly send mail to [email protected].  
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


Loader.
Up arrow icon