How to Format Y-Axis Units in FlexChart Without Affecting Tooltips

When dealing with large numerical values on the Y-Axis of a FlexChart (such as sales figures exceeding billions), axis labels can become overcrowded and hard to read. While applying an axis Formatter simplifies Y-Axis values into scaled units (e.g., displaying values scaled by thousands or millions), doing so also formats the built-in hover tooltips, preventing users from seeing exact unscaled numbers.

Solution

To scale down the Y-Axis units while preserving exact values in mouseover tooltips:

1. Apply an Axis Formatter: Use a custom IFormatter class assigned to AxisY.Formatter to scale down the display labels on the Y-Axis (e.g., dividing values by $100,000$ or $1,000,000$).

2. Disable the Built-In Tooltip: Turn off default tooltips by setting flexChart.ToolTip.Active = false.

3. Implement a Custom Tooltip via HitTest: Attach a MouseMove event handler, perform a HitTest on the cursor location to detect data points, and render a tooltip (such as SuperTooltip) containing the unformatted raw value.

public partial class Form1 : Form
{
    private const int MAX_DIST = 5;
    private C1SuperTooltip _toolTip;

    public Form1()
    {
        InitializeComponent();
        _toolTip = new C1SuperTooltip();

        // 1. Configure chart series and data source
        flexChart1.Series.Add(new Series()
        {
            Name = "Sales Per Annum",
            Binding = "Sales",
            BindingX = "Year",
            ChartType = C1.Chart.ChartType.Column
        });
        flexChart1.DataSource = DataModel.GetData();

        // 2. Customize Y-Axis range and apply scaled unit formatting
        flexChart1.AxisY.Min = 0;
        flexChart1.AxisY.Max = 2_000_000_000;
        flexChart1.AxisY.MajorUnit = 500_000_000;
        flexChart1.AxisY.Formatter = new CustomYAxisFormatter();
        flexChart1.AxisY.Title = "Sales\n[Unit: x100,000]";

        // 3. Disable built-in tooltip and attach custom hover handler
        flexChart1.ToolTip.Active = false;
        flexChart1.MouseMove += FlexChart1_MouseMove;
    }

    private void FlexChart1_MouseMove(object sender, MouseEventArgs e)
    {
        // Check if cursor is over a valid data point
        var hitTestInfo = flexChart1.HitTest(e.Location);
        if (hitTestInfo != null && hitTestInfo.Item != null && hitTestInfo.Distance <= MAX_DIST)
        {
            // Render custom tooltip displaying exact unscaled values
            var dataPoint = hitTestInfo.Item as DataModel;
            string html = $"<p>{dataPoint.Year}<br>{dataPoint.Sales:N0}</p>";
            _toolTip.SetToolTip(flexChart1, html);
        }
        else
        {
            _toolTip.Hide();
        }
    }
}