Skip to content

feat(chart): Implement axis labels rendering for all chart types #2

@moksha-hub

Description

@moksha-hub

Implement axis labels rendering for all chart types in the makepad-chart library to provide proper visual context for data visualization.

Motivation

Currently, charts render data points but lack axis labels, making it difficult for users to:

  • Understand the scale of values on the Y-axis
  • Identify categories/data points on the X-axis
  • Interpret the data being visualized

Axis labels are essential for any production-ready charting library.

Proposed Solution

Add comprehensive axis label rendering support with the following components:

ChartAxis Component

  • ChartAxis struct with configurable orientation (Horizontal / Vertical)
  • Position support (Bottom, Top, Left, Right)
  • Customizable styling (colors, fonts, padding)
  • Show/hide options for line, ticks, and labels

AxisRenderer

  • Coordinated rendering of X and Y axes
  • Automatic tick label positioning
  • Support for different axis positions

DrawLabel Element

  • Text label rendering element for charts
  • AxisLabelRenderer for batch label rendering
  • Configurable text styling

Label Formatting

  • Automatic number formatting with K (thousands) and M (millions) suffixes
  • Custom label formatter support via closures
  • Configurable font size and colors

Implementation Details

// Example usage
let axis = ChartAxis::new()
    .with_orientation(AxisOrientation::Vertical)
    .with_position(AxisPosition::Left)
    .with_label_formatter(|v| format!("${:.0}", v));

// Render labels
axis.render_labels(cx, &ticks, chart_area, scale);




--- PR: #3 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions