$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Chart Skin in ASP.NET
Home > How to > Chart Skin

Information to Chart Skin

The skin of one web chart determines the overall tone of how the chart looks or what feeling it can leave on people. And the asp.net Chart component embeds a set of predefined appearance properties. Of course, you are also free to use your own created skin in the target chart.
In general, the chart skin, which controls all the visual elements of one chart, is a set of images and Cascading Style Sheets (CSS). Thus, you can use the skin to change a chart color scheme, customize chart legend and set chart symbols.
And in this article, we will show you how to use the Skin Property for different application goals and guide you to add a fully customized skin to the target asp.net chart.

How to Customize Chart Skin

In this part, we will put the focus on how to use your own skin style to the chart. But before offering the detailed guiding steps, we will talk about the different effects that the Skin property can bring.
If you do not set the Skin Property, the web Chart control will automatically apply the default skin style to the chart. If you do not want to use any skin style in your chart, you can simply define the value of the Skin property as empty. If you want to apply the Chart embedded skin style, you just need to set the Chart.Skin property to the name of your desired skin style. If you want to use your own styled skin settings, you need to set the Skin property to Custom.
And in following text, we will illustrate the last case of applying your own skin style to the asp.net chart. Note: if you want to add your own skin style, it is recommended that you may use one embedded skin and then change its properties based on your own settings.
The application of saving your own skin style can be finished within following three steps.
  1. Add the new CSS file to your project.
  2. Drag and drop the CSS file from the Project Explorer onto your Web page.
  3. Set the EnableEmbeddedSkins property of the control to False.
  4. Apply following C# sample code