mmo-chart

1 symbol · generated 30 Sep 2026

element

mmo-chart

Chart element to display a chart

<mmo-chart url type title schema icon="chart-pie"></mmo-chart>

Extends: CustomShadowElement

The config is based on Chart.js [https://www.chartjs.org/] 1. config explanation : - type : string => type of chart - data : object => data of chart - options : object => options of chart data is an object with the following properties : - labels : array => labels of chart (optional, is mandatory for multiple bars, multiple lines, pie, doughnut, polarArea) - datasets : array => datasets of chart - label : string => label of dataset - data : array => data of dataset - backgroundColor : string|array => background color of dataset - borderColor : string|array => border color of dataset - borderWidth : number => border width of dataset - pointRadius : number => point radius of dataset options is an object with the following properties : - responsive : if true, the chart will be responsive - maintainAspectRatio : if true, the chart will maintain its aspect ratio - aspectRatio : aspect ratio of the chart - scales : scales of the chart - y : object => y axis of the chart - ticks : object => ticks of the y axis - precision : number => precision of the y axis - plugins : plugins of the chart - title : title of the chart - legend : legend of the chart - position : position of the legend - display : if true, the legend will be displayed 2. config example : { "type": "bar", "data": { "datasets": [ { "label": "Paris", "data": [1200, 1300, 1100, 1400], "backgroundColor": ["#004996"], "borderColor": ["#004996"], "borderWidth": 2, "pointRadius": 2 }, { "label": "Londres", "data": [1300, 1500, 900, 1200], "backgroundColor": ["#ffa700"], "borderColor": ["#ffa700"], "borderWidth": 2, "pointRadius": 2 } ] }, "options": { "responsive": true, "maintainAspectRatio": true, "y": { "ticks": { "precision": 0, } }, "plugins": { "title": {"display": false}, "legend": {"position": "top", "display": true} } } - options are optional, if not set, default options are set and will be used

Index

	url	the url to get data from
	type	the type of chart to use (default bar)
	title	the title of the chart
	schema	the schema to use
	icon	the icon to display in chart title
	ViewDefault static readonly accessor
	type accessor	Get the type of the chart
	config accessor	Get the config of the chart
	url accessor	Get the url of the chart
	collection accessor	Get the collection of the chart
	collections accessor	Get the collections of the chart
	schema accessor	Get the schema of the chart
	data readonly accessor	Get the data of the chart
	index accessor	Get the index of the chart
	diff accessor	Get the diff of the chart
	unit accessor	Get the unit of the chart
	icon accessor	Get the icon of the chart
	title accessor	Get the title of the chart
	constructor()
	init()
	updateTendency()	Update the tendency of the chart
	updateChart()	Update the chart
	update()	Update the component
	updateTheme(theme)	Update the theme of the chart
	downloadJSON()	Download the data of the chart as a JSON file
	configure()	Show a configuration in the app panel
	onCollectionChange()	Update the schema when the collection changes
	updateSchema()	Update the schema of the chart
	(default)	a caption shown under the plot, in place of the generated one
	.loading	hide toolbar while loading component