pub struct Chart { /* private fields */ }
Expand description
The chart representation.
Anatomy of a Chart
A chart is a collection of different components, each of which is responsible for rendering a specific part of the chart. Below is a sample chart with a few components:
Sales Report
| # coffee
30| x x juice
| @ x @ @ milk
20| # @ x@ x@ #
| #x@ #x@ #x@ #x
10| #x@ #x@ #x@ #x@
| #x@ #x@ #x@ #x@
0+-----------------------------------------------------
Jan Feb Mar Apr
The chart above has the following components: an x axis, an y axis, a title on the top center, and a legend on the top right.
The creation of charts in Charming is done in a builder-like fashion. Once you get a hang of this pattern, you will find that it is very easy to compose a chart. For instance, the following code snippet shows how to create the chart above:
use charming::Chart;
use charming::component::{Axis, Legend, Title};
let chart = Chart::new()
.title(Title::new().text("Sales Report"))
.x_axis(Axis::new().data(vec!["Jan", "Feb", "Mar", "Apr"]))
.y_axis(Axis::new())
.legend(Legend::new().data(vec!["coffee", "juice", "milk"]));
Components of a Chart
The following sections describe the components of a chart in detail.
Title
Title
is the title of a chart, including main title and subtitle. A chart
can have multiple titles, which is useful when you want to show multiple sub-
charts in a single chart.
use charming::Chart;
use charming::component::Title;
let chart = Chart::new()
.title(Title::new().text("Sales Report"));
Legend
Legend
is the legend of a chart, which is used to show the meaning of the
symbols and colors in the chart. A chart can have multiple legends.
use charming::Chart;
use charming::component::Legend;
let chart = Chart::new()
.legend(Legend::new().data(vec!["coffee", "juice", "milk"]));
Grid
Grid
is the background grid in a cartesian coordinate system. A chart can
have multiple grids.
use charming::Chart;
use charming::component::Grid;
let chart = Chart::new()
.grid(Grid::new());
X Axis and Y Axis
Axis
is the axis in a cartesian coordinate system.
use charming::Chart;
use charming::component::Axis;
let chart = Chart::new()
.x_axis(Axis::new().data(vec!["Jan", "Feb", "Mar", "Apr"]))
.y_axis(Axis::new());
Polar Coordinate
[Polar
] is the polar coordinate system. Polar coordinate can be used in
scatter and line charts. Every polar coordinate has an AngleAxis
and a
RadiusAxis
.
Radar Coordinate
RadarCoordinate
is the radar coordinate system. Radar coordinate can be in
radar charts.
Data Zoom
DataZoom
is used for zooming a specific area, which enables user to view
data in different scales. A chart can have multiple data zooms.
Visual Map
VisualMap
is a visual encoding component. It maps data to visual channels,
such as color, symbol size or symbol shape. A chart can have multiple visual
maps.
Tooltip
Tooltip
is a floating box that appears when user hovers over a data item.
AxisPointer
AxisPointer
is a tool for displaying reference line and axis value under
mouse pointer.
Toolbox
Toolbox
is a feature toolbox that includes data view, save as image, data
zoom, restore, and reset.