Charts

Everyday statistical charts — line, bar, pie, radar and more — with interaction.

Tech: Canvas 2D, 坐标映射, DemoControls

Line Chart — Connecting each data point in sequence to see how the values rise or fall over time; smoothing and dashing.
Multi-series Line — Multi-data set retweeting.
Area Chart — Area = Line + Filled below, highlighting cumulative volume rather than just movement.
Step Line — stairline: the value remains unchanged until the next point, then suddenly jumps and is suitable to represent the slot, Price adjustments.
Bar Chart — The height of the column indicates the numerical size, and the category is placed in a cross-axis.
Horizontal Bar — It's easier to read a column across, and it suits the ranking.
Stacked Bar — A column has multiple compositions, the total height being a sum and the colour segment being a partial.
Stacked Area — The multidimensional build-up is stacked upwards and downs, the overall height is the sum, and the colour belts represent the contribution of each part.
Grouped Bar — The same category is divided into multiple pillars, directly different from the different series in that category.
Pie Chart — The circle is cut into a fan, the angles are poignant.
Doughnut Chart — Circumference: The sum of the pies that are emptied in the middle, representing the proportion of each arc long, is available at the centre.
Radar Chart — Multiple dimensions are circumscribed into polygons, and the larger the shape, the stronger it is, the better it is for a capability model.
Polar Area — Each valve radius represents the value, the angles are equal, like the radar "cake" version.
Scatter Plot — Each point is a sample (x,y) of the relevant and discrete points.
Bubble Chart — The breakpoint + radius means the third variable, the greater the bubble, the greater the dimension.
Mixed Chart — The column chart and the line diagram are in the same picture: the column looks at the number and the line looks at the trend.
Sparkline — Mini-portrait: There are no small folds of the axis, which appear in the table or card at a glance.
Gauge — dashboard: Half a circle at a time, pointer to angle = current value as a proportion of maximum value.
Progress Ring — Full circle means 0~100% completion.
Waterfall Chart — From the point of departure, each step is added or reduced and ends up at the end, and is used to dismantle profit changes.
Combo Chart — Combination diagrams have the same coordinate system of columns and lines (or areas) and are suitable for the dashboard overview.
Log-scale Line — Logarithmic scale。
Horizontal Stack — Horizontal stacked。
Density Bars — A lot of fine columns lined up, like histograms, to see a dissipation.
Realtime Stream — Realtime streaming。
Radar Comparison — Two layers of radar superimpose, comparing the coverage differences of the two sets.
Doughnut with Legend — Ring + Right Legend, clearer when projecting.
Bar + Line Dual Axis — Two-coordinate axes: the left axis is used for the column, the right axis is used for the fold, and the data are compared in two different units.
Exploded Pie — Dissociative pie charts: Push a piece of sector outward along the radius, highlighting the focus categories.
Bubble Matrix — A bubble map: The area of each circle represents the numerical size and position represents the other two dimensions.
Mini Bar Strip — The mini-column is embedded in the report, with more visible recent fluctuations than the numbers.
Range Area — A banded area surrounded by two upper and lower borders often indicates a confidence interval or a high temperature range.
Category Share — Text-oriented / A pre-set pie map of the channel share.
Weekday Comparison — Monday to Sunday group comparison for workdays / Weekend difference.
KPI Ring — KPI Ring Progress: The proportion of the circle filled = the completed value ÷ target value, with percentages shown in the middle.
Canvas Mini Trend — Canvas sparkline。
Canvas Gauge — Canvas dashboard.
Canvas Stacked — Canvas stack.