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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions