Siticone Heatmap Chart

The SiticoneHeatmapChart is a powerful data visualization tool that represents data values as colors in a matrix format. It is ideal for identifying patterns, correlations, and anomalies across two dimensions (rows and columns).

Data Binding

To render a heatmap, you must map the data source fields to the Row (Y-axis), Column (X-axis), and Value (Color intensity).

Property	Type	Description & Usage Example
`DataSource`	object	chart.DataSource = myPivotTable; The source of the matrix data. Accepts `DataTable`, `List<T>`, or `IEnumerable`.
`RowMember`	string	chart.RowMember = "EmployeeName"; The property name for the vertical axis categories.
`ColumnMember`	string	chart.ColumnMember = "Month"; The property name for the horizontal axis categories.
`ValueMember`	string	chart.ValueMember = "SalesAmount"; The property name containing the numeric value that determines the cell color intensity.

Appearance & Theming

Customize the color gradients, grid lines, and text styles.

Property	Type	Description & Usage Example
`Theme`	HeatmapThemePreset	chart.Theme = HeatmapThemePreset.Hot; Applies a preset gradient theme. Options include `Cool` (Blues), `Hot` (Red/Yellow), `Viridis`, etc.
`ColorScaleStart`	Color	chart.ColorScaleStart = Color.LightYellow; The color representing the minimum value in the dataset.
`ColorScaleEnd`	Color	chart.ColorScaleEnd = Color.DarkRed; The color representing the maximum value in the dataset.
`ShowCellValues`	bool	chart.ShowCellValues = true; Displays the actual numeric value inside each cell.
`CellValueFormatString`	string	chart.CellValueFormatString = "N0"; Format string for displayed numbers (e.g., "C2" for currency, "P1" for percentage).
`GridLineStyle`	DashStyle	chart.GridLineStyle = DashStyle.Dot; Style of the grid lines separating cells.

Behavior & Interaction

Control animations and interactive feedback for the user.

Property	Type	Description & Usage Example
`EnableAnimations`	bool	chart.EnableAnimations = true; If true, cells fade in and colorize smoothly when data is loaded.
`EnableTooltips`	bool	chart.EnableTooltips = true; Shows a tooltip with Row, Column, and Value information on hover.

Public Methods

DataBind()

// Forces the chart to process the DataSource and render the heatmap grid.
// Call this after changing data or member mappings.
heatmapChart.DataBind();

Events

Respond to user interaction with heatmap cells.

Event Descriptions & Wiring

// 1. CellClick Event
// Fires when a user clicks a cell.
chart.CellClick += (s, e) => 
{
                MessageBox.Show($"Value at {e.RowHeader} / {e.ColumnHeader}: {e.Value}");
};

// 2. CellHover Event
// Fires when the mouse enters a cell.
chart.CellHover += (s, e) => 
{
    statusLabel.Text = $"Analyzing: {e.RowHeader} - {e.ColumnHeader}";
};

// 3. DataLoaded Event
// Fires after data processing is complete.
chart.DataLoaded += (s, e) => 
{
                Console.WriteLine($"Heatmap Grid: {e.RowCount}x{e.ColumnCount}. Range: {e.MinValue} to {e.MaxValue}");
};

Detailed Usage Examples

Example 1: Sales Performance (DataTable)

Visualizing sales data across regions and quarters.

C# - Sales Heatmap

private void LoadSalesHeatmap()
{
                DataTable dt = new DataTable();
    dt.Columns.Add("Region", typeof(string));
    dt.Columns.Add("Quarter", typeof(string));
    dt.Columns.Add("Revenue", typeof(double));

    dt.Rows.Add("North", "Q1", 50000);
    dt.Rows.Add("North", "Q2", 65000);
    dt.Rows.Add("South", "Q1", 45000);
    dt.Rows.Add("South", "Q2", 48000);

    heatmapChart.DataSource = dt;
    heatmapChart.RowMember = "Region";
    heatmapChart.ColumnMember = "Quarter";
    heatmapChart.ValueMember = "Revenue";
    
                // Styling
    heatmapChart.Theme = HeatmapThemePreset.Cool;
    heatmapChart.ShowCellValues = true;
    heatmapChart.CellValueFormatString = "C0";
    
    heatmapChart.DataBind();
}

Example 2: Risk Matrix (List of Objects)

Visualizing project risks based on Impact and Probability.

C# - Risk Matrix

public class RiskItem
{
                public string Impact { get; set; }
                public string Probability { get; set; }
                public int Count { get; set; }
}

private void LoadRiskMatrix()
{
                var risks = new List<RiskItem>
    {
                new RiskItem { Impact = "High", Probability = "High", Count = 5 },
                new RiskItem { Impact = "High", Probability = "Low", Count = 2 },
                new RiskItem { Impact = "Low", Probability = "High", Count = 8 }
    };

    heatmapChart.DataSource = risks;
    heatmapChart.RowMember = "Impact";
    heatmapChart.ColumnMember = "Probability";
    heatmapChart.ValueMember = "Count";
    
                // Custom Green Theme
    heatmapChart.Theme = HeatmapThemePreset.Hot;
    heatmapChart.DataBind();
}

Enumerations

HeatmapThemePreset Enum

public enum HeatmapThemePreset
{
    Custom, 
    Cool, // Blue gradient
    Hot,  // Red/Yellow gradient
    Viridis, 
    Magma, 
    Grayscale, 
    Inferno,
                // ... and many more
}