Charts

Charts are built on ECharts. There are 28 chart types in total — from the familiar lines and bars to funnels, maps and relationship diagrams. Data comes from SQL queries to the connected sources, and the look is tuned with styling overrides.

Lines and bars

• Line chart (LineChartContent) — how a value changes over time: revenue, traffic, price. Multiple series are supported, plus smoothing, area fill under the line, steps for “sits still, then jumps” patterns (tariffs, stock levels) and normalizing curves of different scales to 100;
• Bar chart (BarChartContent) — comparing categories side by side: channels, products, regions. Bars stack into stacks, there is a 100-percent stack for composition, sorting and top-N for long lists;
• Combo chart (ComboChartContent) — bars for one measure and a line for another on two axes with labels: cost and its share, sales volume and average check.

Comparison: plan against actual

• Dumbbell chart (DumbbellChartContent) — two points per entity connected by a line: plan and actual, “before” and “after”, forecast and reality. The segment’s length and direction show the gap, labels show the size of the difference: handy for comparing suppliers, managers, marketplaces;
• Bullet chart (BulletChartContent) — a value bar against a target marker and colored tolerance bands: does the metric fit the norm. The color itself depends on whether higher or lower than target is better;
• Slope chart (SlopeChartContent) — one line per entity between two periods: how a ranking or value changed. Falling lines are red, rising are green — you see both overtaking and swapping places;
• Pareto chart (ParetoChartContent) — categories in descending order with a cumulative share line: how few positions produce most of the losses or revenue. The dashed marker sits at 80% by default.

Composition, shares and flows

• Doughnut chart (DoughnutChartContent) — shares of a whole: inner and outer radius, legend, and a rose-chart mode that makes small sectors readable;
• Treemap (TreemapChartContent) — shares of a whole as rectangles: an honest replacement for the pie when there are many parts and sectors become indistinguishable. A parent column nests categories into each other, and a “sunburst” mode lays the same tree out as rings;
• Waterfall chart (WaterfallChartContent) — what the total is made of: price → discounts → commissions → profit. Every bar is a signed step, the last one shows the total;
• Flow diagram (SankeyChartContent) — where money or goods flow: ribbon width equals volume. If the data forms a cycle, the chart tells you honestly instead of drawing a broken picture.

Distributions

• Histogram (HistogramChartContent) — how the values of one numeric column are distributed: where the bulk is and where the long tail is. The calculation runs on the server (POST /api/query/histogram) — the data is not shipped to the browser in full;
• Box plot (BoxPlotChartContent) — median, quartiles and outliers: compare spread between groups. Quartiles are computed on the server (POST /api/query/boxplot);
• Violin plot (ViolinChartContent) — the full distribution shape per group: two humps, a queue, a heavy tail — the things a box plot doesn’t show. A “bee swarm” mode draws one point per observation;
• Heatmap (HeatmapContent) — value density across two columns: every cell is colored by magnitude;
• Calendar heatmap (CalendarHeatmapContent) — every day in a calendar cell, colored by value: the daily rhythm (spikes on weekdays, quiet weekends) that a monthly summary erases.

Funnels, schedules and sensitivity

• Funnel (FunnelChartContent) — stages as narrowing bands: how many people reach each step and how many are lost in between (views → cart → order). The stage order comes from the query;
• Gantt chart (GanttChartContent) — “from date to date” bars on each row, with a vertical marker for today: seasonal windows, delivery plans, return deadlines. A state column sets the bar color;
• Tornado chart (TornadoChartContent) — which factor moves the result the most: a bar per factor shows the outcome at its worst and best value. The most influential one is on top.

Profiles and geography

• Radar chart (RadarChartContent) — an object’s profile across 3–8 criteria: candidates are compared not by table rows but by shape. The area can be filled with color;
• Parallel coordinates (ParallelCoordinatesChartContent) — its own axis per measure, its own line per object: you immediately see who is evenly good and who has a dip in one measure with all the others fine;
• Venn diagram (VennChartContent) — the overlap of two or three groups: how many customers are shared, how many are unique. The circle area is the group size, the lens is the overlap;
• Region map (MapChartContent) — the 85 regions of Russia or 176 countries of the world, colored by value: when the story is geographic, the picture is the answer. Region names are matched to the map, and unmatched ones are listed below it.

Relationships and states

• Node graph (NodeGraphChartContent) — nodes and edges from a list of connections: who is linked to whom and how tightly (edge thickness). Nodes can be dragged;
• State timeline (StateTimelineChartContent) — colored intervals per label: when a metric was in which state;
• Status history (StatusHistoryChartContent) — a grid of cells over time: discrete periods for each label, the whole state tape at once.

Both work well together with alerts: the “calm → pending → firing → recovered” transitions of rules are visible right in the report.

Financial series and dependencies

• Candlesticks (CandlestickChartContent) — financial open/high/low/close series with trading volume from your databases;
• Scatter plot (ScatterChartContent) — the relationship of two numeric columns: price and demand, conversion and spend. A third column sets the point size (zValueColumn), a divider column sets the color (colorColumn); a trend line shows the direction of the relationship, reference lines show thresholds and bounds.

Scales and gauges

• Gauge (GaugeContent) — a metric as a speedometer with lower and upper scale bounds;
• Bar gauge (BarGaugeContent) — a ranked series of values, each bar colored by thresholds: ratings, norms, a traffic light down a list.

Shared capabilities

All charts share the same capabilities, whatever the type:

• Reference lines and bands — a norm, a target, a tolerance bound: a line at a fixed value, at a statistic of the data itself (median, 10th and 90th percentiles), or at a value from a query column. A band is set by two bounds. The “are we within the norm” check reads off the picture instead of being computed in your head;
• Annotated events — a second small table with dates and labels: marker dots and shaded periods appear on the chart — promotions, outages, holidays, a tariff change. The cause of a dip or spike sits right next to it;
• Intervals — confidence-interval whiskers on bars and points, a band per series on lines: a pessimistic and an optimistic scenario around the main curve;
• Value labels and marked points — numbers right on the chart (when there aren’t many), and outliers get a badge with an explanation: you see both the jump itself and what caused it;
• Comparison with the past — a dashed “ghost” line of the same metric a week, a month or a year ago, and moving-average smoothing: the trend is visible while weekly noise stays out of the way;
• Small multiples — the same picture per channel, category or warehouse: a row of small charts on a shared scale, so the series are compared honestly;
• Axis settings — your own axis label and format, lower and upper bounds, a logarithmic scale, an inverted axis for places and rankings, sorting and top-N with an honest note of how many categories are hidden, and a time axis that leaves gaps instead of squeezing out missing days;
• Tooltips — can be extended with query columns: on hover you see not just the value but the context too (for example, the customer count next to the sum), and on a scatter plot the point is labeled by name.

Titles and legends come with every chart, and the look changes without touching the query — through styling overrides: threshold colors, line and point styles, hidden series. Details in the Styling section.

← Back to the documentation index