Search results

Title

Accumulation chart can be given a title using Title property, to show the information about the data plotted.

title.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Title

Title Customization

Title can be customized by using TitleStyle property.

title-cus.razor
<EjsAccumulationChart Title="Mobile Browser Statistics"> 
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" 
                                     Name="Browser"> 
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
        <AccumulationChartTitleStyle FontFamily="Arial" FontStyle="Italic" FontWeight="regular" Color="#E27F2D" Size="23px"></AccumulationChartTitleStyle>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Subtitle

Accumulation Chart can be given a subtitle using SubTitle property, to show the information about the data plotted.

sub-title.razor
<EjsAccumulationChart Title="Mobile Browser Statistics" SubTitle="In the year 2014 - 2015"> 
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings> 
  
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Subtitle

Subtitle Customization

Subtitle in accumulation chart can be customized using SubTitleStyle property.

sub-title-cus.razor
<EjsAccumulationChart Title="Mobile Browser Statistics" SubTitle="In the year 2014 - 2015"> 
        <AccumulationChartSubTitleStyle FontFamily="Arial" FontStyle="Italic" FontWeight="regular" Color="#E27F2D" Size="13px"></AccumulationChartSubTitleStyle> 
       
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings> 
  
        <AccumulationChartSeriesCollection> 
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
            </AccumulationChartSeries> 
        </AccumulationChartSeriesCollection>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;
    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}