This is a migrated thread and some comments may be shown as answers.

Applying FillStyle to a Bar or Area Series

3 Answers 60 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Chris Burtch
Top achievements
Rank 1
Chris Burtch asked on 01 Aug 2014, 05:30 PM
I cannot figure out how to apply a Fillstyle to a Bar or Area Series Pragmatically. Also it appears that by default an Area chart does something with the opacity of its chart colors. How and where do I access this property? Any help would be appreciated.

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 04 Aug 2014, 07:11 AM
Hi Chris Burtch,

Please try the below sample code snippet to achieve your scenario.

C#:
protected void Page_Load(object sender, EventArgs e)
 {
     RadHtmlChart areaChart = new RadHtmlChart();
     areaChart.ID = "RadHtmlChart1";
 
     areaChart.ChartTitle.Text = "Company Performance";
     areaChart.ChartTitle.Appearance.Align = ChartTitleAlign.Center;
     areaChart.ChartTitle.Appearance.Position = ChartTitlePosition.Top;
 
     areaChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
 
     areaChart.PlotArea.XAxis.AxisCrossingValue = 0;
     areaChart.PlotArea.XAxis.Color = System.Drawing.Color.Black;
     areaChart.PlotArea.XAxis.MajorTickType = TickType.Outside;
     areaChart.PlotArea.XAxis.MinorTickType = TickType.Outside;
     areaChart.PlotArea.XAxis.TitleAppearance.Text = "Years";
     areaChart.PlotArea.XAxis.TitleAppearance.Position = AxisTitlePosition.Center;
     areaChart.PlotArea.XAxis.MajorGridLines.Color = System.Drawing.Color.BlueViolet;
     areaChart.PlotArea.XAxis.MinorGridLines.Color = System.Drawing.Color.Brown;
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2004"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2005"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2006"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2007"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2008"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2009"));
     areaChart.PlotArea.XAxis.Items.Add(new AxisItem("2010"));
 
     areaChart.PlotArea.YAxis.Color=System.Drawing.Color.Black;
     areaChart.PlotArea.YAxis.MajorTickType = TickType.Outside;
     areaChart.PlotArea.YAxis.MinorTickType = TickType.Outside;
     areaChart.PlotArea.YAxis.MaxValue=1500;
     areaChart.PlotArea.YAxis.Step=100;
     areaChart.PlotArea.YAxis.MajorGridLines.Color = System.Drawing.Color.BlueViolet;
     areaChart.PlotArea.YAxis.MinorGridLines.Color = System.Drawing.Color.Brown;
     areaChart.PlotArea.YAxis.TitleAppearance.Position = AxisTitlePosition.Center;
     areaChart.PlotArea.YAxis.TitleAppearance.Text="Finance";
 
     AreaSeries series=new AreaSeries();
     series.Name="Sales";
     series.MissingValues=MissingValuesBehavior.Gap;
     series.Appearance.FillStyle.BackgroundColor=System.Drawing.Color.Orange;
     series.LabelsAppearance.Position=LineAndScatterLabelsPosition.Above;
     series.MarkersAppearance.MarkersType=MarkersType.Circle;
     series.MarkersAppearance.BackgroundColor=System.Drawing.Color.White;
     series.TooltipsAppearance.BackgroundColor=System.Drawing.Color.White;
     series.SeriesItems.Add(new CategorySeriesItem(400));
     series.SeriesItems.Add(new CategorySeriesItem(500));
     series.SeriesItems.Add(new CategorySeriesItem(720));
     series.SeriesItems.Add(new CategorySeriesItem(1300));
     series.SeriesItems.Add(new CategorySeriesItem(450));
     series.SeriesItems.Add(new CategorySeriesItem(800));
     series.SeriesItems.Add(new CategorySeriesItem(900));
 
     areaChart.PlotArea.Series.Add(series);
 
     AreaSeries series1=new AreaSeries();
     series1.Name="Expenses";
     series1.MissingValues=MissingValuesBehavior.Gap;
     series1.Appearance.FillStyle.BackgroundColor=System.Drawing.Color.Green;
     series1.LabelsAppearance.Position=LineAndScatterLabelsPosition.Above;
     series1.MarkersAppearance.MarkersType=MarkersType.Circle;
     series1.MarkersAppearance.BackgroundColor=System.Drawing.Color.White;
     series1.TooltipsAppearance.BackgroundColor=System.Drawing.Color.White;
     series1.SeriesItems.Add(new CategorySeriesItem(700));
     series1.SeriesItems.Add(new CategorySeriesItem(900));
     series1.SeriesItems.Add(new CategorySeriesItem(420));
     series1.SeriesItems.Add(new CategorySeriesItem(1100));
     series1.SeriesItems.Add(new CategorySeriesItem(650));
     series1.SeriesItems.Add(new CategorySeriesItem(600));
     series1.SeriesItems.Add(new CategorySeriesItem(700));
 
     areaChart.PlotArea.Series.Add(series1);
 
     form1.Controls.Add(areaChart);
 }

Thanks,
Shinu.
0
Chris Burtch
Top achievements
Rank 1
answered on 04 Aug 2014, 02:41 PM
Thank You Shinu for the response. This only shows how to set the background color. I am looking for the setting other FillStyle Elements such as FillType, etc.

Any help would be appreciated.
0
Stamo Gochev
Telerik team
answered on 06 Aug 2014, 05:57 AM
Hi Chris,

Currently, we support the BackgroundColor property inside the FillStyle tag. If you have ideas for future improvements, you can post them in our Feedback Portal.

Regards,
Stamo Gochev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart (HTML5)
Asked by
Chris Burtch
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Chris Burtch
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or