Crate leptos_chartistry

Expand description

Welcome to Chartistry! This crate provides a flexible way to build charts in Leptos.

All charts are built using the Chart fn. If you understand this function, you understand this library.

§Examples

See the demo for Chartistry in action.
There is also an large, assorted list of examples available.

Below is an example chart:

use leptos::prelude::*;
use leptos_chartistry::*;


let data: Signal<Vec<MyData>> = load_data(/* pull data from a resource */);
view! {
    <Chart
        // Sets the width and height
        aspect_ratio=AspectRatio::from_outer_ratio(600.0, 300.0)

        // Decorate our chart
        top=RotatedLabel::middle("My garden")
        left=TickLabels::aligned_floats()
        right=Legend::end()
        bottom=TickLabels::timestamps()
        inner=[
            AxisMarker::left_edge().into_inner(),
            AxisMarker::bottom_edge().into_inner(),
            XGridLine::default().into_inner(),
            YGridLine::default().into_inner(),
            XGuideLine::over_data().into_inner(),
            YGuideLine::over_mouse().into_inner(),
        ]
        tooltip=Tooltip::left_cursor()

        // Describe the data
        series=Series::new(|data: &MyData| data.x)
            .line(Line::new(|data: &MyData| data.y1).with_name("butterflies"))
            .line(Line::new(|data: &MyData| data.y2).with_name("dragonflies"))
        data=data
    />
}

Re-exports§

pub use inner::IntoInner as _;
pub use layout::IntoEdge as _;

Structs§

AlignedFloats: Generates f64 ticks. Aligned to nice values (powers of 10).
AspectRatio: Calculates the width and height of a chart.
AxisMarker: Builds an axis marker. This marks a boundary (e.g., zero or the chart edge) around the inner chart area.
Bar: Draws a bar on the chart.
Colour: A colour in RGB format.
ColourScheme: A colour scheme with at least one colour.
InsetLegend: Builds an inset legend for the chart series. Differs from Legend by being placed inside the chart area.
Legend: Builds a legend for the chart series. Orientated along the axis of its placed edge. Drawn in HTML.
Line: Draws a line on the chart.
Marker: Describes a line point marker.
Padding: Represents padding around the edges of a component.
RotatedLabel: Builds a rotated label to match the orientation of the axis it’s placed on.
Series: Describes how to render a series of data. A series is a collection of lines, bars, etc. that share the same X and Y axes.
Stack: Draws a stack of lines on top of each other.
TickLabels: Builds tick labels for an axis.
Timestamps: Generates timestamp ticks from a set of periods. Aligned to nice values (earlier periods).
Tooltip: Builds a mouse tooltip that shows X and Y values for the nearest data. Drawn in HTML as an overlay.
XGridLine: Builds a tick-aligned grid line across the inner chart area.
XGuideLine: Builds a mouse guide line. Aligned over the mouse position or nearest data.
YGridLine: Builds a tick-aligned grid line across the inner chart area.
YGuideLine: Builds a mouse guide line. Aligned over the mouse position or nearest data.

Enums§

AlignOver: Align over mouse or nearest data.
Anchor: Label placement on the main-axis of a component. An edge layout’s main-axis runs parallel to its given edge. Similar to SVG’s text-anchor or CSS’s justify-content.
AxisPlacement: Placement of an axis marker around the inner chart area.
BarPlacement: The location of where the bar extends from.
Edge: Identifies a rectangle edge.
EdgeLayout: All possible layout options for an edge of a Chart. See IntoEdge for details.
InnerLayout: Inner layout options for a Chart. See IntoInner for details.
Interpolation: Line interpolation. This is used to determine how to draw the line between points.
MarkerShape: Shape of a line marker.
Period: Available periods for timestamp tick generation.
Step: Step interpolation only uses horizontal and vertical lines to connect two points. We have a choice of where to put the “corner” of the step.
TooltipPlacement: Where the tooltip is place when shown.
TooltipSortBy: How the tooltip Y value table is sorted.

Constants§

AXIS_MARKER_COLOUR: Default colour for axis markers.
BAR_GAP: Default gap ratio between bars.
BAR_GAP_INNER: Default gap ratio inside a group of bars.
DIVERGING_GRADIENT: Suggested colour scheme for a diverging gradient on a line. Uses a blue for negative values, a dark central value and red for positive values. Assumes a light background.
GRID_LINE_COLOUR: Default colour for grid lines.
GUIDE_LINE_COLOUR: Default colour for guide lines.
LINEAR_GRADIENT: Suggested colour scheme for a linear gradient on a line. Uses darker colours for lower values and lighter colours for higher values. Assumes a light background.
SERIES_COLOUR_SCHEME: Arbitrary colours for a brighter palette than BATLOW
STACK_COLOUR_SCHEME: Default colour scheme for stack. Assumes a light background with dark values for high values.
TOOLTIP_CURSOR_DISTANCE: Default gap distance from cursor to tooltip when shown.

Traits§

IntoEdge: Convert a type (e.g., a rotated label) into an edge layout for use with Chart.
IntoInner: Convert a type (e.g., a guide line) into an inner layout for use in a Chart.
Tick: A type that can be used as a tick on an axis. Try to rely on provided implementations.
TickFormat: Formats a tick value into a string. The precise format will be picked by the tick generator. For example if Timestamps is used and is only showing years then the format will be YYYY.

Functions§

Chart: Renders an SVG chart.

Type Aliases§

DivergingGradient: A diverging gradient of colours i.e., a gradient that tends to a central value then a second gradient away. Maps to a ColourScheme. Use with Line::with_gradient.
SequentialGradient: A gradient of colours. Maps to a ColourScheme

Crate leptos_chartistry

Crate leptos_chartistry Copy item path

§Examples

Re-exports§

Structs§

Enums§

Constants§

Traits§

Functions§

Type Aliases§

Crate leptos_chartistry