# Customize Appearance

Customize the appearance of the data points in FlexChart. Learn more about customizing the appearance of charts in MVC documentation.

## Content

FlexChart allows you to customize the appearance of the data points based on their values using **ItemFormatter** property of the FlexChart class. The **ItemFormatter** property lets you customize the UI of the control using a JavaScript function.
The following code examples demonstrate how to customize the appearance of the data points in FlexChart.
![ Customized appearance of the data points in FlexChart](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexchartseriesappearance.png)

### Create an MVC application

Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc/CreatingaNewProject) topic.

### Create a data source for FlexChart

1. Add a new class to the folder **Models** (for example: `Dot.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols#step2) to know how to add a new model.
2. Add the following code to the new model to define the class that serve as a datasource for the FlexChart control. **csharp**

    ```csharp
    public class Dot
    {
        public double X { get; set; }
        public double Y { get; set; }
        public double Size { get; set; }
    }
    ```

    **vbnet**

    ```vbnet
    Public Class Dot
        Public Property X As Double
        Public Property Y As Double
        Public Property Size As Double
    End Class
    ```

### Add FlexChart and customize its appearance

1. In the **Solution Explorer**, right click the folder **Controllers.**
2. From the context menu, select **Add \| Controller**. The **Add Scaffold** dialog appears.
3. Complete the following steps in the **Add Scaffold** dialog:
    1. Select **MVC 5 Controller - Empty** template.
    2. Set name of the controller (for example: `FlexChartController`).
    3. Click **Add**.

**Add a View for the Controller**

1. From the **Solution Explorer**, expand the folder **Controllers** and double click the controller `FlexChartController` to open it.
2. Place the cursor inside the `Index()` method.
3. Right click and select **Add View**. The **Add View** dialog appears.
4. In the **Add View** dialog, verify that the view name is **Index** and View engine is **Razor (CSHTML).**
5. Click **Add**. A view is added for the controller.
6. Replace the code in the Index.cshtml file with the following.

    ```razor
    @using ItemFormatter.Models;
    @{
        List<Dot> cos = new List<Dot>();
        for (int i = 0; i < 300; i++)
        {
            cos.Add(new Dot { X = 0.16 * i, Y = Math.Cos(0.12 * i) });
        }
    }
    <script type="text/javascript">
        var itemFormatter = function (engine, hitTestInfo, defaultFormat) {
            if (hitTestInfo.chartElement === wijmo.chart.ChartElement.SeriesSymbol) {
                var y = hitTestInfo.y;
                var r = y >= 0 ? 255 : (255 * (1 + y)).toFixed();
                var b = y < 0 ? 255 : (255 * (1 - y)).toFixed();
                var g = ((1 - Math.abs(y)) * 255).toFixed();
                engine.fill = 'rgb(' + r + ',' + g + ',' + b + ')';
                defaultFormat();
            }
        };
    </script>
    @(Html.C1().FlexChart()
            .ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols)
            .Series(sers =>
            {
            sers.Add().Bind(cos)
                    .BindingX("X")
                    .Binding("Y")
                    .Name("cos(x)")
                    .TooltipContent("<b>{name}</b> : {value}");})
        .Legend(C1.Web.Mvc.Chart.Position.None).ItemFormatter("itemFormatter"))
    ```

### Build and Run the Project

1. Click **Build \| Build Solution** to build the project.
2. Press **F5** to run the project.

> Append the folder name and view name to the generated URL (for example: http://localhost:1234/**FlexChart/Index**) in the address bar of the browser to see the view.