Chart

Chart visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display.

Import

import { MpChart } from '@mekari/pixel3'

Playground

API

MpChart

Props

Events

Slots

Name	Type	Default
id Id of chart.	string	-
title Title of chart.	string	-
type Type of chart.	bar | line | pie | doughnut | radar	bar
width-chart Width of chart.	string	100%
height-chart Height of chart.	string	256px
width-container Width of chart container.	string	100%
height-container Height of chart container.	string	100%
data Data of chart.	object	{ labels: '', dataSets: [] }
options Options of chart.	object	{}
color-pattern Pattern color of chart.	categorical | comparison | light shade | dark shade	categorical
color-start Starting number for color of chart. from 1 to 16.	number	1
color-ratio Ratio shades for color of chart. from 0.1 to 0.9, only apply when color pattern is dark-shades or light-shades.	number	0.2
legend-position Position of legend from chart.	bottom | right | top | left	bottom
legend-direction Direction of chart legend.	left | center | right	left
tooltip-margin-top Margin top value for chart tooltip, if use custom legend.	number	0
tooltip-margin-left Margin left value for chart tooltip, if use custom legend.	number	0
tooltip-options Options for tooltip of chart.	object	{ offsetTop: 0, offsetLeft: 0 }
is-show-legend If true, custom chart legend will showed.	boolean	true
is-show-tooltip If true, custom chart tooltip will showed.	boolean	true
is-show-data-labels If true, custom chart legend will showed.	boolean	false
is-horizontal If true, will render horizontal chart.	boolean	false
is-stacked If true, will render stacked chart.	boolean	false
is-area If true, will render area chart.	boolean	false
is-debug If true, debug info will showed in console.	boolean	false
is-show-background-hover If true, background color changes when hovered.	boolean	false
is-show-gauge-pointer If true, show gauge pointer on chart.	boolean	false

Usage

Bar Chart

Horizontal Bar Chart

Line Chart

Pie Chart

Doughnut Chart

Area Chart

Radar Chart

Mix Chart

Scrollable Chart

Gauge Chart

Customized Chart