Appearance
28 Feb 202224 minutes to read
Chart Theme Customization
You can customize the default theme of the chart theme property. There are 9 themes available. They are, Material, Fabric, Bootstrap, HighContrastLight, MaterialDark, FabricDark, HighContrast, BootstrapDark and Bootstrap4.
<ejs-chart id="container" title="Olympic Medals" theme="HighContrast">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>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;
}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.
@{
var palettes = new String[] { "#E94649", "#F6B53F", "#6FAAB0", "#C4C24A" };
}
<ejs-chart id="container" title="Olympic Medals" palettes="palettes">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" title="Olympic Medals" pointRender="pointRender">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
<script>
var colors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
pointRender = function (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.
<ejs-chart id="container" title="Olympic Medals" background="skyblue">
<e-chart-border width="2" color="#FF0000"></e-chart-border>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" title="Olympic Medals" background="skyblue">
<e-chart-margin bottom="40" top="40" left="40" right="40"></e-chart-margin>
<e-chart-border width="2" color="#FF0000"></e-chart-border>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>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
Using background and border properties, you can change the background color and border of the chart area. Width for the chart area can be customized using width property.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-chartarea background="skyblue" width="90%"></e-chart-chartarea>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
<e-series-border width="3" color="red"></e-series-border>
<e-series-animation enable="true" duration="2000" delay="200"></e-series-animation>
</e-series>
</e-series-collection>
</ejs-chart>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;
}Fluid Animation
Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [animate] method.
<ejs-chart id="container" loaded="window.onChartLoaded">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Tiger" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
</e-series-datalabel>
</e-series-marker>
<e-series-cornerradius bottomLeft="10" bottomRight="10" topLeft="10" topRight="10"></e-series-cornerradius>
</e-series>
</e-series-collection>
</ejs-chart>
<script>
window.onChartLoaded = function (args) {
var count = 0;
args.chart.loaded = null;
setInterval(
function () {
if (count === 0) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 206, text: 'Egg' },
{ x: 'Fish', y: 123, text: 'Fish' },
{ x: 'Misc', y: 48, text: 'Misc' },
{ x: 'Tea', y: 240, text: 'Tea' },
{ x: 'Fruits', y: 170, text: 'Fruits' }
];
args.chart.animate();
count++;
}
else if (count === 1) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 206, text: 'Egg' },
{ x: 'Fish', y: 123, text: 'Fish' },
{ x: 'Misc', y: 48, text: 'Misc' },
{ x: 'Tea', y: 240, text: 'Tea' },
{ x: 'Fruits', y: 170, text: 'Fruits' }
];
args.chart.animate();
count++;
}
else if (count === 2) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 206, text: 'Egg' },
{ x: 'Fish', y: 123, text: 'Fish' },
{ x: 'Misc', y: 48, text: 'Misc' },
{ x: 'Tea', y: 240, text: 'Tea' },
{ x: 'Fruits', y: 170, text: 'Fruits' }
];
args.chart.animate();
count = 0;
}
}, 2000);
}
</script>public IActionResult Index()
{
List<RoundedColumnChartData> chartData = new List<RoundedColumnChartData>
{
new RoundedColumnChartData { x= "BGD", y= 106, text= "Bangaladesh" },
new RoundedColumnChartData { x= "BTN", y= 103, text= "Bhutn" },
new RoundedColumnChartData { x= "NPL", y= 198, text= "Nepal" },
new RoundedColumnChartData { x= "THA", y= 189, text= "Thiland" },
new RoundedColumnChartData { x= "MYS", y= 250, text= "Malaysia" }
};
ViewBag.dataSource = chartData;
ViewBag.font = new { fontWeight = "600", color = "#ffffff" };
return View();
}
public class RoundedColumnChartData
{
public string x;
public double y;
public string text;
}Chart Title
Chart can be given a title using title property, to show the information about the data plotted.
<ejs-chart id="container" title="Olympic Medals">
<e-chart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" size="23px"
color="red"></e-chart-titlestyle>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" title="Olympic Medal Counts - RIO" subTitle="(1975-2010)">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult 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;
}