What’s Coming in 2018 Volume 1: Chart in Xamarin.Forms

Syncfusion is excited to announce that we have enhanced our most popular Xamarin chart control with a new chart type and many most requested features in the upcoming 2018 Volume 1 release. They are: gradient color support, legend items templating, customization of individual axis labels, new spline range area chart type, and performance improvements.

Gradient colors—It’s time to make the chart more stylish with gradient colors. We have constructed models to define gradient colors, allowing you to customize the direction of gradient colors using start and end points and set the color based on the range. The following screenshot shows how the high and low temperatures of the year are differentiated with colors.

The following are code snippets of gradient color configuration.

XAML

C#

chart.ColorModel.Palette = ChartColorPalette.Custom;
chart.ColorModel.CustomGradientColors = new ChartGradientColorCollection()
{ 
 new ChartGradientColor()
    {
        StartPoint = new Point(0.5, 1),
        EndPoint = new Point(0.5, 0),
        GradientStops = new ChartGradientStopCollection(){
        new ChartGradientStop(){ Color = Color.FromHex("#3649FE"), Offset = 0},
        new ChartGradientStop(){ Color = Color.FromHex("#FF0D09"), Offset = 1}
  }
    }
};

Advanced customization of axis labels—This feature allows us to customize chart axis labels based on the indexes and values. We have included appearance customization APIs for the existing LabelCreated EventArgs. The following screenshot has been captured from the test app, the date-time axis labels are customized based on date, the first label of the month is formatted with month, day, and year components of date, and consecutive labels on the month are just showing the day of the month.

 Advanced customization of axis label

The following is a code snippet of individual axis customization.

int month = int.MaxValue;
//Label created event of primary axis.
//chart.PrimaryAxis.LabelCreated += PrimaryAxis_LabelCreated;
private void PrimaryAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e)
{
    //Parse the date time label to date object.
    var date = DateTime.Parse(e.LabelContent);
    if (date.Month != month)
    {
        //Format the date to display day, month and year component if the label is very first label of the month.
        e.LabelContent = date.ToString("\t\t\t\t\t\tdd\nMMM-yyyy");
        //Reset the month
        month = date.Month;
        //Set the font attribute as bold to differentiate with other labels.
        e.LabelStyle = new ChartAxisLabelStyle();
        e.LabelStyle.Font = Font.SystemFontOfSize(9, FontAttributes.Bold);
    }
    else
    {
        //Format the label to show only day of the month for remaining label.
        e.LabelContent = date.ToString("dd");
    }
}

Templating legend items—Now, we can set a data template for legend items, replacing the entire built-in legend item view with the data template. We can make the necessary bindings in a data template with the respective legend item’s value.

The following is a code snippet of a legend template.

Note: The complete sample will be available in our Xamarin.Forms sample browser after the 2018 Volume 1 release.

New chart type – We have added a new chart type called spline range area in this release, this is used to show the trend of high and low values of data using curved area. This chart type is similar to range area chart.

Code snippet of spline range area series.

XAML

C#

chart.Series.Add(
    new SplineRangeAreaSeries
    {
        Label = "Product A",
        ItemsSource = ProductA,
        XBindingPath = "XValue",
        High = "High",
        Low = "Low"
    });


chart.Series.Add(
    new SplineRangeAreaSeries
    {
        Label = "Product B",
        ItemsSource = ProductB,
        XBindingPath = "XValue",
        High = "High",
        Low = "Low"
    });

Performance—The performance of interactivity in charts with a large amount of data has been improved. Now, it is easy to move the trackball across the chart, activate the tooltip to show data point info, and zoom in to view data clearly when there’s 500K data points.

With the above features and improvements, we have included some other minor improvements and bug fixes, the information for which will be published in our release notes. Our 2018 Volume 1 release has been scheduled to rollout in mid-February. Please post your comments below if you have any questions or feedback. We are happy to offer any help we can.