C# .NET Chart Customization Quickstart

5 min readJun 6, 2025

What You Will Need
• ComponentOne
• Visual Studio

Controls Referenced
• Flexchart for WinForms
• Flexchart for WPF
• Flexchart for Blazor

Tutorial Concept
Explore concise C# examples that demonstrate how to customize key features of the .NET Chart control’s axes, including axis lines, label grouping, scrollbars, and other essential elements.

Whether you’re building a dashboard in WinForms, visualizing data in WPF, or deploying a sleek UI in Blazor, ComponentOne FlexChart offers a robust C# .NET chart control consistent across platforms like .NET MAUI, ASP.NET MVC, WinUI, and even JavaScript (with Wijmo’s FlexChart). Its cross-platform nature, paired with intuitive customization features, makes it a favorite among .NET developers.

In today’s guide, we’re diving deep into how to tailor chart axes in FlexChart using C#. From showing or hiding axis lines to managing complex multi-axis layouts, we’ll cover everything you need to create a clean and professional data visualization experience.

Show or Hide Axis Lines

Modern charts often follow a minimalist design, omitting axis lines by default — FlexChart is no exception. However, if your visualization calls for a clearer separation of data, you can easily toggle these lines.

flexChart.AxisY.AxisLine = true;

The AxisLine property controls whether the axis line is rendered. Simple as that!

Display Axis Titles in C# Charts

Axis titles play a vital role in communicating what each axis represents. With FlexChart, you can set titles and style them using the Title and TitleStyle properties.

flexChart.AxisX.Title = "Day of Week";   
flexChart.AxisX.TitleStyle.StrokeColor = Color.Blue;   
flexChart.AxisY.Title = "Amount - In Dollars";   
flexChart.AxisY.TitleStyle.StrokeColor = Color.Blue;

These properties ensure your C# chart axis labels aren’t just functional — they’re also visually aligned with your app’s design.

Managing Overlapping Axis Labels

If your chart includes a dense category axis, label overlap can quickly reduce readability. FlexChart gives you several options to manage this:

Show all
Hide overlapping (Auto)
Trim
WordWrap
Stagger

Here’s how to stagger and control overlapping labels:

flexChart.AxisX.OverlappingLabels = OverlappingLabels.Show;  
flexChart.AxisX.StaggeredLines = 2;

You can also let FlexChart intelligently rotate labels only when necessary:

flexChart.AxisX.LabelAngle = Double.NaN;

Format C# Chart Axis Labels

Need to show currency, dates, or percentages? Format axis labels using standard or custom .NET format strings via the Format property.

flexChart.AxisX.Format = "MMM-dd-yyyy";   
flexChart.AxisY.Format = "C0";

The table below shows some general axis format strings for use in FlexChart.

Pro tip: To reduce clutter in minimal designs, shorten large numbers — e.g., 60,000,000 becomes 60M.

Customize Gridlines, Tick Marks, and Intervals

FlexChart lets you fine-tune the axis display with precision. Configure major/minor gridlines and tick marks, as well as interval units:

flexChart.AxisY.MinorTickMarks = TickMark.Outside;   
flexChart.AxisY.MajorTickMarks = TickMark.Outside;  
flexChart.AxisY.MajorGrid = true;  
flexChart.AxisY.MinorGrid = false;   
flexChart.AxisY.MajorUnit = 5000;   
flexChart.AxisY.MinorUnit = 1000;   
flexChart.AxisY.MajorGridStyle.StrokeColor = Color.Red;

Create Hierarchical Axis Grouping

Want to group data by quarter, region, or another logical category? Use GroupNames to build hierarchical C# chart axis labels with ease.

flexChart1.AxisX.GroupNames = "Continent";

FlexChart also supports multi-level grouping using comma-separated field names and advanced hierarchical structures via the GroupItemsPath property.

To handle numeric and date grouping dynamically, implement the IAxisGroupProvider interface.

Try it out using ASP.NET Core with this sample for axis grouping.

Adjust Axis Scale

By default, FlexChart uses a linear scale. But if your data spans orders of magnitude, a logarithmic scale may offer better insight.

flexChart.AxisY.LogBase = 10;

You can also manually define the axis bounds using the Min and Max properties to zoom in on critical data ranges.

Enable Axis Scrollbars for Range Selection

Add interactivity to your charts with axis scrollbars. These allow users to zoom or pan across a range without additional code.

WinForms:

AxisScrollbar scrollbar = new C1.Win.Chart.Interaction.AxisScrollbar(flexChart.AxisX);

WPF / WinUI:

flexChart.AxisX.Scrollbar = new C1AxisScrollbar();

Blazor Example:

<FlexChart @ref="chart" Class="chart" ChartType="ChartType.Line" 
           BindingX="Day" Binding="Value" ItemsSource="Data" >
    <SeriesCollection>
        <Series />
    </SeriesCollection>
    <AxisCollection>
        <Axis Position="Position.Left" AxisType="AxisType.Y" Scrollbar="sby" />
        <Axis Position="Position.Bottom" AxisType="AxisType.X" Scrollbar="sbx"/>
    </AxisCollection>
</FlexChart>

@code {
    C1.Blazor.Chart.Interaction.AxisScrollbar sbx = new C1.Blazor.Chart.Interaction.AxisScrollbar();
    C1.Blazor.Chart.Interaction.AxisScrollbar sby = new C1.Blazor.Chart.Interaction.AxisScrollbar();
    FlexChart chart;
    }

Plotting Multiple Axes

Do you need to visualize different units or scales side by side? FlexChart supports multiple X and Y axes — more than just the standard two!

Check out the code below to add a secondary Y-axis for a “Velocity” series:

var yAxis2 = new Axis  
{  
    AxisLine = false,  
    Position = Position.Right,  
    MajorGrid = false,  
    MajorTickMarks = TickMark.None,  
    Title = "Velocity – in m/sec",  
    Format = "n0",  
};  
var series = new Series  
{  
    SeriesName = "Velocity",  
    ChartType = ChartType.Line,  
    Binding = "Velocity",  
    AxisY = yAxis2,  
};  
flexChart.Series.Add(series);

You can create an unlimited number of axes, each tailored for specific data series.

Explore More C# Chart Axis Label Samples

Get hands-on experience with these interactive samples:

GitHub Repositories

Explore real-world FlexChart samples:

Wrapping Up

Customizing C# chart axis labels in FlexChart unlocks a wide range of visualization possibilities. Whether you need precision formatting, interactive controls, or layered grouping, FlexChart delivers a clean and consistent C# .NET chart control to deliver visually compelling charts.

Looking to see it in action? Watch our video walkthrough on how to bind data, style labels, and fine-tune axis behavior with ASP.NET Core.

MESCIUS inc.