mmo-chart2

1 symbol · generated 30 Sep 2026

element

mmo-chart2

<mmo-chart2 type="bar" width="560" height="300" icon="chart-pie" url stacked smooth trend trend-target></mmo-chart2>

Extends: CustomShadowElement

-- bar -- - stacked: {bool} if true, stacked data in one bar -- line -- - smooth: {bool} if true, smooth points line -- pie -- - stacked: {bool} if true, stacked data in one pie -- radar --

Index

	type	the plot to draw: `bar`, `line`, `area`, `pie`, `radar` or `table`
	width	the drawing width of the svg, in user units
	height	the drawing height of the svg, in user units
	icon	the icon shown next to the title
	url	where to read the configuration from, instead of setting `config`
	stacked	stack the series into one bar (or one ring) instead of drawing them side by side
	smooth	draw a line chart through curves rather than straight segments
	trend	show the delta badge: `normal` (a rise is good) or `reverse` (a rise is bad)
	trend-target	what the delta compares to: `next-data`, `prev-data`, `next-set`, `prev-set`
	config	type: the graph type: bar\|line\|area\|pie\|table\|radar - icon: the icon's name to use - title: the title of the graph - colors: a list of colors - padding: {left: int, top: int, right: int, bottom: in…
	type accessor	Get the type of the chart
	stacked accessor	Whether the series are stacked into one shape.
	smooth accessor	Whether a line is drawn through curves.
	trend accessor	The delta mode, `normal` or `reverse`.
	trendTarget accessor	What the delta compares against.
	url accessor	Get the url of the chart
	config accessor	Get the config of the chart
	dataset readonly accessor	The series to draw, always as a list of lists.
	labels readonly accessor	The label of each point along the axis.
	padding readonly accessor	The room left around the plot for the axis and its labels.
	animation readonly accessor	The easing the bars and lines are drawn with.
	init()
	getColor(index)	The colour of one series, falling back to the first when the palette is shorter.
	getLegend(index)	The name of one series, or a generated one.
	getLabel(index)	The label of one point, or a generated one.
	hasTrend()	Whether this chart shows a delta badge.
	isReverseTrend()	Whether a rise is the bad news, which swaps the badge colours.
	showTooltip(html, evt)	Show the tooltip with the given content, at the pointer.
	hideTooltip()	Hide the tooltip.
	updateTooltip(evt)	Move the tooltip so it follows the pointer and stays inside the element.
	connectTooltip(element, datasetIndex, dataIndex, onEnter, onExit)	Make one drawn shape (a bar, a dot, a slice) show the tooltip while it is pointed at.
	update()	Redraw everything from the current configuration: the plot, the legend, the table.
	renderTrend(datasetIndex, dataIndex)	The delta badge of one point, as html, compared to what `trend-target` names.
	formatNumber(n)	Shorten a number for an axis or a badge (`12000` becomes `12.0k`).
	loopTicks(min, max, count) generator
	drawAxis(root, yMin, yMax)	Draw the axis, its ticks and its labels, scaled to the values.
	drawLegend()	Draw the legend under the plot, one entry per series.
	drawLabelsAndLegend()	Draw the legend of a chart whose entries are the labels rather than the series (a pie).
	animateAttribute(element, attr, from, to, duration, unit, animation)	Animate one svg attribute, which is how a plot grows into place when it is drawn.
	drawBarChart(root)	Draw the bar chart, side by side or stacked.
	drawLineChart(root, withArea, smooth)	Draw the line chart, optionally filled and optionally smoothed.
	drawAreaChart(root)	Draw the area chart, which is the line chart with its area filled.
	drawPieChart(root)	Draw the pie, or the ring when the series are stacked.
	drawRadarChart(root)	Draw the radar: one axis per label, one polygon per series.
	(default)	a caption under the plot
	.table	show the table instead of the plot, which is what the switch button toggles

Attributes10

type

mmo-chart2.jhs

the plot to draw: bar, line, area, pie, radar or table

type="bar"

width

mmo-chart2.jhs

the drawing width of the svg, in user units

width="560"

height

mmo-chart2.jhs

the drawing height of the svg, in user units

height="300"

icon

mmo-chart2.jhs

the icon shown next to the title

icon="chart-pie"

url

mmo-chart2.jhs

where to read the configuration from, instead of setting config

url

stacked

mmo-chart2.jhs

stack the series into one bar (or one ring) instead of drawing them side by side

stacked

smooth

mmo-chart2.jhs

draw a line chart through curves rather than straight segments

smooth

trend

mmo-chart2.jhs

show the delta badge: normal (a rise is good) or reverse (a rise is bad)

trend

trend-target

mmo-chart2.jhs

what the delta compares to: next-data, prev-data, next-set, prev-set

trend-target

config

mmo-chart2.jhs

type: the graph type: bar|line|area|pie|table|radar - icon: the icon's name to use - title: the title of the graph - colors: a list of colors - padding: {left: int, top: int, right: int, bottom: int} - data: list of values or a list of list of values (ex: [[a1,a2], [b1,b2], [c1,c2]]) - legend: list of title for each set in data (ex: [a,b,c]) - labels: list of labels for each data (ex: [1,2]) - animation: linear|quadIn|quadOut|quadInOut|cubicIn|cubicOut|cubicInOut|quartIn|quartOut|quartInOut|quintIn|quintOut|quintInOut|easeIn|easeOut|easeInOut|backIn|backOut|backInOut|circIn|circOut|circInOut|bounceIn|bounceOut|bounceInOut|elasticIn|elasticOut|elasticInOut - trend: normal|reverse - trendTarget: next-data|prev-data|next-set|prev-set

config

Properties11

type

accessormmo-chart2.jhs:161

Get the type of the chart

get type() set type(value)

Type: string

stacked

accessormmo-chart2.jhs:179

Whether the series are stacked into one shape.

get stacked() set stacked(value)

Type: boolean

smooth

accessormmo-chart2.jhs:193

Whether a line is drawn through curves.

get smooth() set smooth(value)

Type: boolean

trend

accessormmo-chart2.jhs:207

The delta mode, normal or reverse.

get trend() set trend(value)

Type: ?string

trendTarget

accessormmo-chart2.jhs:221

What the delta compares against.

get trendTarget() set trendTarget(value)

Type: ?string

url

accessormmo-chart2.jhs:236

Get the url of the chart

get url() set url(value)

Type: string

config

accessormmo-chart2.jhs:271

Get the config of the chart

get config() set config(value)

Type: object

dataset

readonlyaccessormmo-chart2.jhs:301

The series to draw, always as a list of lists.

get dataset()

Type: Array<Array<number>>

labels

readonlyaccessormmo-chart2.jhs:309

The label of each point along the axis.

get labels()

Type: Array<string>

padding

readonlyaccessormmo-chart2.jhs:317

The room left around the plot for the axis and its labels.

get padding()

Type: object

animation

readonlyaccessormmo-chart2.jhs:325

The easing the bars and lines are drawn with.

get animation()

Type: string

Methods23

init()

mmo-chart2.jhs:140

init()

getColor(index)

mmo-chart2.jhs:334

The colour of one series, falling back to the first when the palette is shorter.

getColor(index)

index	`number`
returns	`string`

getLegend(index)

mmo-chart2.jhs:343

The name of one series, or a generated one.

getLegend(index = 0)

index = 0	`number`
returns	`string`

getLabel(index)

mmo-chart2.jhs:352

The label of one point, or a generated one.

getLabel(index = 0)

index = 0	`number`
returns	`string`

hasTrend()

mmo-chart2.jhs:360

Whether this chart shows a delta badge.

hasTrend()

returns boolean

isReverseTrend()

mmo-chart2.jhs:368

Whether a rise is the bad news, which swaps the badge colours.

isReverseTrend()

returns boolean

showTooltip(html, evt)

mmo-chart2.jhs:381

Show the tooltip with the given content, at the pointer.

showTooltip(html, evt)

html	`string`
evt	`MouseEvent`
returns	`void`

hideTooltip()

mmo-chart2.jhs:392

Hide the tooltip.

hideTooltip()

returns void

updateTooltip(evt)

mmo-chart2.jhs:402

Move the tooltip so it follows the pointer and stays inside the element.

updateTooltip(evt)

evt	`MouseEvent`
returns	`void`

connectTooltip(element, datasetIndex, dataIndex, onEnter, onExit)

mmo-chart2.jhs:427

Make one drawn shape (a bar, a dot, a slice) show the tooltip while it is pointed at.

connectTooltip(element, datasetIndex, dataIndex, onEnter, onExit)

element	`SVGElement`
datasetIndex	`number`
dataIndex	`number`
onEnter	`?function`	- extra work when the pointer arrives
onExit	`?function`	- extra work when it leaves
returns	`void`

update()

mmo-chart2.jhs:445

Redraw everything from the current configuration: the plot, the legend, the table.

update()

returns void

renderTrend(datasetIndex, dataIndex)

mmo-chart2.jhs:473

The delta badge of one point, as html, compared to what trend-target names.

renderTrend(datasetIndex, dataIndex)

datasetIndex	`number`
dataIndex	`number`
returns	`string`

formatNumber(n)

mmo-chart2.jhs:510

Shorten a number for an axis or a badge (12000 becomes 12.0k).

formatNumber(n)

n	`number`
returns	`string`

loopTicks(min, max, count)

generatormmo-chart2.jhs:516

*loopTicks(min, max, count = 5)

min
max
count = 5

drawAxis(root, yMin, yMax)

mmo-chart2.jhs:534

Draw the axis, its ticks and its labels, scaled to the values.

drawAxis(root, yMin, yMax)

root	`SVGElement`
yMin	`number`
yMax	`number`
returns	`void`

drawLegend()

mmo-chart2.jhs:569

Draw the legend under the plot, one entry per series.

drawLegend()

returns void

drawLabelsAndLegend()

mmo-chart2.jhs:588

Draw the legend of a chart whose entries are the labels rather than the series (a pie).

drawLabelsAndLegend()

returns void

animateAttribute(element, attr, from, to, duration, unit, animation)

mmo-chart2.jhs:627

Animate one svg attribute, which is how a plot grows into place when it is drawn.

animateAttribute(element, attr, from, to, duration = 800, unit = null, animation = null)

element	`SVGElement`
attr	`string`
from	`number`
to	`number`
duration = 800	`number`	- in milliseconds
unit = null	`?string`
animation = null	`?string`	- the easing, defaulting to the chart's own
returns	`void`