Appearance in MVC Chart component

18 Nov 20182 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.

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.

Data point customization

The color of individual data point or data points within a range can be customized using the options below.

Point color mapping

You can bind the color for the points from DataSource for the series using PointColorMapping property.

Range color mapping

You can differentiate data points based on their y values using RangeColorSettings in the chart.

Point level customization

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

Chart area customization

Customize the chart background

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

Chart margin

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

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.

Chart area margin

You can customize the space between the chart area from its chart container through Margin property.

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.

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.

Chart title

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

Title position

By using the Position property in TitleStyle, you can position the Title at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default.

The custom option helps you to position the title anywhere in the chart using X and Y coordinates.

Title alignment

You can align the title to the near, far, or center of the chart using the TextAlignment property.

Chart subTitle

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