Skip to content
ModernUI A DaneTrades developer library

Charts and Stat Cards

ModernUI includes compact visual controls for dashboard-style summaries.

Use them for small, readable panels rather than full charting platforms.

Main controls and helpers

Helper/control Use it for
Mui::Card General card block
Mui::CardEx Card with subtitle/icon options
Mui::StatCard Label, value, delta, accent summary
Mui::Progress Progress bar
Mui::Sparkline Compact trend line
Mui::LineChart Small line chart
Mui::BarChart Small bar chart
Mui::Donut Donut/pie-style proportion
Mui::HalfGauge Gauge-style proportion
Mui::Swatch Colour sample

StatCard

UI build fragment
MuiStatCard *card=Mui::StatCard(
  parent,
  "Open items",
  "12",
  "+3 today",
  0xFF3B82F6,
  260.0,
  120.0
);

Use stat cards for compact summary values.

Examples:

  • open items
  • active sessions
  • connected accounts
  • current risk setting
  • sync age
  • local status

Avoid using stat cards to imply trading performance unless the data is real and clearly labelled.

Card

UI build fragment
MuiCard *card=Mui::Card(parent,"Summary",320.0,180.0);

Use cards when you need a visual container that is more self-contained than a simple section.

Sparkline

UI build fragment
double values[];
ArrayResize(values,5);
values[0]=1.0;
values[1]=1.3;
values[2]=1.1;
values[3]=1.6;
values[4]=1.4;

MuiSparkline *spark=Mui::Sparkline(parent,values,240.0,70.0);

Sparklines are best for compact trend hints.

Bar chart

UI build fragment
double bars[];
ArrayResize(bars,4);
bars[0]=4.0;
bars[1]=6.0;
bars[2]=3.0;
bars[3]=8.0;

MuiBarChart *chart=Mui::BarChart(parent,bars,240.0,100.0);

Line chart

UI build fragment
double xs[];
double ys[];
ArrayResize(xs,4);
ArrayResize(ys,4);

xs[0]=0; ys[0]=1.0;
xs[1]=1; ys[1]=1.2;
xs[2]=2; ys[2]=1.1;
xs[3]=3; ys[3]=1.5;

MuiLineChart *line=Mui::LineChart(parent,xs,ys,290.0,140.0);

Donut and gauge

UI build fragment
double vals[];
uint cols[];
ArrayResize(vals,2);
ArrayResize(cols,2);

vals[0]=70.0;
vals[1]=30.0;
cols[0]=0xFF3B82F6;
cols[1]=0xFF334155;

MuiDonutChart *donut=Mui::Donut(parent,vals,cols,180.0,160.0,true);
MuiHalfGaugeChart *gauge=Mui::HalfGauge(parent,vals,cols,200.0,140.0,true);

Grid helpers

Some chart helpers support grid toggles.

UI build fragment
Mui::SparklineGrid(spark,true);
Mui::BarChartGrid(chart,true);
Mui::LineChartGrid(line,true);

When to use these controls

Use charts and stat cards for:

  • compact summaries
  • demo dashboards
  • operational status
  • visual grouping
  • small trend indicators
  • proof-of-UI capability

Avoid using them as a full trading chart replacement.

ModernUI chart widgets are for UI dashboards, not a substitute for MT5’s price chart.

Common mistakes

Overloading a compact panel

Too many charts make a small EA panel noisy. Use one or two visual elements only when they help.

Showing fake trading performance as if real

Demo values must be clearly demo values.

Using dashboard widgets where a simple label is better

If the value is simple status, use StatusRow or a label.

Related pages