A chart in eQuantic.UI is ONE component written in C#. The same BarChart renders on the web (server-side and in the browser) and on Photon (desktop and mobile), from the same code, in the colours the theme reserves for data. The library is eQuantic.UI.Charts, and the SDK puts it in scope in every project the way it does eQuantic.UI.Components: there is nothing to install and no using to write.

Since 0.2.0-preview.50

The bar chart

BarChart(

title: "Revenue by quarter",

subtitle: "Three regions, side by side",

series:

[

ChartSeries("Europe", [120_000, 138_500, 149_200, 171_000]),

ChartSeries("Americas", [98_400, 104_900, 99_700, 132_300]),

ChartSeries("Asia", [61_200, 72_800, 88_100, 95_500]),

categories: CategoryAxis(["Q1", "Q2", "Q3", "Q4"]),

values: ValueAxis(format: "C0", title: "Revenue"))

The factories are the declarative surface: each one is named like its type and mirrors its constructor parameter for parameter (BarChart, ChartSeries, CategoryAxis, ValueAxis), so a dashboard reads without a single new.

Three arrangements, one component:

you want

you write

groups side by side (the default)

layout: BarLayout.Grouped

one series on top of another

layout: BarLayout.Stacked

bars running left to right, for long category names

orientation: ChartOrientation.Horizontal

plotHeight sets the height of the plot alone; the width is whatever the chart is given, and the bars fill it.

What every chart brings without being asked:

•

A legend when there is more than one series. Pressing an entry isolates that series; pressing it again brings the others back. One series shows no legend, because the title already names it.

•

A tooltip that follows the pointer, naming the category, the series and the value.

•

A table view. The footer's Show as table swaps the plot for a DataTable of the same numbers, and Show as chart swaps back: the same data for a screen reader, a keyboard, or someone who wants the figures.

•

Axis labels from your data: the categories under (or beside) the plot, the values on clean ticks. ValueAxis(format: "C0") formats every value label and every table cell with a .NET format string in the current culture: the same "C0" prints €120,000 on one request and R$ 120.000 on the next. min, max and ticks fix the axis when you would rather it did not follow the data.

•

An accessible name: the canvas carries the chart's title, so the plot is announced as what it is.

Colour comes from the theme

A chart never states a colour. IAppTheme.Data is a DataPalette with eight series slots, sequential and diverging ramps, and four status steps, audited for contrast and for colour-vision deficiencies: the default palette ships audited, and yours can be checked the same way with PaletteAudit. The rules are held by construction rather than by advice:

•

The first series wears slot 0, the second slot 1, and so on; ChartSeries("Forecast", values, slot: 3) pins a series to a slot so it keeps its colour across charts.

•

A ninth series throws at build. Eight distinguishable colours is where the audit stops; a chart with more series is a table.

•

Status colours are reserved for state. A series that MEANS good or bad wears status; "series 4" never does.

•

Text never wears a data colour: labels, legend entries and tooltips read in the theme's text tokens, and the swatch beside them carries the colour.

Rebranding the data colours is providing your own Data on your theme, exactly as you provide Primary.

How it renders

The chart's chrome (title, subtitle, legend, axis labels, the table, the footer) is ordinary nodes (Text, Row, Column, DataTable), so it lays out, wraps, themes and speaks to assistive technology like the rest of your screen. The marks are a Canvas painted with the engine's own shapes: rounded rectangles on the web's SVG, the same rectangles on Photon's GPU.

On the web the chrome is server-rendered like the rest of your page, and the marks are drawn the moment the plot has been measured: a canvas that fills its box has no size until CSS has laid it out, so the server emits the frame and the browser paints into it.

The geometry is solved once, in BarChartLayout: C# on the server and on Photon, its transpiled twin in the browser. A pinned fixture solved by both compilations is compared line for line in the test suites, so a bar the two would place a tenth of a dp apart fails the build. Tick values snap to 1, 2, 5 and 10 by multiplication rather than logarithms for the same reason: the two runtimes must agree on every tick.

What is coming

The bar chart is the first slice of a plan that reaches the chart types the wrappers below covered: line, area and sparklines with a time axis; pie, donut, gauge, heatmap and scatter; radar and candlestick, annotations, animation and export through a capability. The plan lives in the repository as docs/CHARTS-PLAN.md, with what each slice delivers and what is fenced on purpose (dual axes, 3D and funnels among them).

Wrappers, for the transition

Two web-only wrappers around JavaScript libraries predate the native library and remain available until it covers their chart types, at which point they are removed:

•

eQuantic.UI.Charts.ChartJs, Chart.js on an HTML5 canvas: bar, line, pie, doughnut, radar.

•

eQuantic.UI.Charts.ApexCharts, ApexCharts on SVG: area, bar, line, heatmap, candlestick.

They are opt-in packages, web-only (they render nothing on Photon), and they take the library's own configuration as C# classes that mirror its JavaScript API:

dotnet add package eQuantic.UI.Charts.ApexCharts

builder.Services.AddUI(options =>

{

options.UseApexCharts() // or UseChartJs(); each serves its library's scripts

.ScanAssembly(typeof(Program).Assembly);

});

new ApexChart<MyData>

{

Options = new ApexOptions { Chart = new ChartConfig { Type = "bar" } },

Series = [new ApexSeries<MyData> { Name = "Sales", Data = dataList }],

}

Their scripts are declared through the Asset System and injected where a page uses them; nothing is added by hand. A page that only needs a bar chart should use BarChart above: it renders on every target, and it is the one that stays.

PREVIOUSImage

NEXTIcons

ON THIS PAGE

The bar chart

Colour comes from the theme

How it renders

What is coming

Wrappers, for the transition