# Customize Appearance

## 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 image below shows the how the chart appears on customization.
![C1Web Custom Chart](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/flexchartseriesappearance.png)

The following code examples demonstrate how to customize the appearance of the data points in FlexChart.

To accomplish this, follow these steps:

1. [Create an MVC application](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexChart/Work-with-FlexChart/customizeseriesappearance#step-1-create-an-mvc-application)
2. [Create a data source for FlexChart](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexChart/Work-with-FlexChart/customizeseriesappearance#step-2-create-a-data-source-for-flexchart)
3. [Add FlexChart and customize its appearance](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexChart/Work-with-FlexChart/customizeseriesappearance#step-3-add-flexchart-and-customize-its-appearance)
4. [Build and run the project](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexChart/Work-with-FlexChart/customizeseriesappearance#step-4-build-and-run-the-project)

### Step 1: 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-core/Configuring-your-MVC-Application) topic.

### Step 2: Create a data source for FlexChart

2. Add a new class to the folder **Models** (for example: `Dot.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc-core/Adding-Controls) to know how to add a new model.
3. Add the following code to the new model to define the class that serve as a data source for the FlexChart control.

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

### Step 3: 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 **Empty MVC Controller** 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
    <c1-flex-chart chart-type="LineSymbols" 
                   legend-position="None"
                   item-formatter="itemFormatter">
        <c1-flex-chart-series binding-x="X" binding="Y" name="cos(x)">
            <c1-items-source source-collection="cos"></c1-items-source>
        </c1-flex-chart-series>
    </c1-flex-chart>
    ```

### Step 4: 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.