ASP.NET Core

Search results

Appearance

27 Jul 2021 / 2 minutes to read

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.

tagHelper

custom.cs

@{    
     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.

tagHelper

point.cs

<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.

tagHelper

area.cs

<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.

tagHelper

margin.cs

<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 Background

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

tagHelper

background.cs

<ejs-chart id="container" title="Olympic Medals">
        <e-chart-chartarea background="skyblue"></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.

tagHelper

<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>

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.

tagHelper

fluid.cs

<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.

tagHelper

title.cs

<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;
        }

Annotation

Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.

You can add annotations to the chart by using the annotations option. By using the content option of annotation object, you can specify the id of the element that needs to be displayed in the chart area.

tagHelper

annotation.cs

<ejs-chart id="container" title="Olympic Medals">
        <e-chart-annotations>
            <e-chart-annotation content="70 Gold Medals" coordinateUnits="Point" x="France" y="50">
            </e-chart-annotation>
        </e-chart-annotations>
        <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, 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;
        }

Contents

Custom Color Palette
Point Level Customization
Chart Area Customization
Animation
Fluid Animation
Chart Title
Annotation

Contents

Custom Color Palette
Point Level Customization
Chart Area Customization
Animation
Fluid Animation
Chart Title
Annotation

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!