Search results

Appearance

Custom Color Palette

You can customize the default color of series or points by providing a custom color palette of your choice by using the palettes property.

razor
custom.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).Add();
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).Add();  
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).Add();  
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).Add();    
   }).
   Palettes(ViewBag.palletes).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Point Level Customization

Marker, datalabel and fill color of each data point can be customized with pointRender and textRender event.

razor
point.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").PointRender("point").Render()
}
<script>
function point(args) {
    args.fill = colors[args.point.index];
}
</script>
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Chart Area Customization

Customize the Chart Background

Using background and border properties, you can change the background color and border of the chart.

razor
area.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Chart Margin

You can set margin for chart from its container through margin property.

razor
margin.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource). 
   Width(2).Add();
   }).
   Margin(ViewBag.margin)
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Chart Area Background

The chart area background can be customized by using the background property in the chartArea.

razor
background.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Animation

You can customize animation for a particular series using animation property. You can enable or disable animation of the series using enable property, duration specifies the duration of an animation and delay allows us to start the animation at desire time.

razor
animation.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Chart Title

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

razor
title.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").TitleStyle(ViewBag.style).Render()
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Chart SubTitle

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