# Charts

The mx-chart component provides chart generation via Chart.js (opens new window). The type, data, and options are all passed via three props of the same name.

By default, the charts are sized to the container width, and the chart's height is determined by its aspect ratio. The width and height props may be used to set an explicit size in pixels. Be sure to set the maintainAspectRatio option to false if necessary when setting an explicit height.

# Line charts

Randomize

Sparkline

    <mx-chart ref="lineChart" type="line" :data.prop="lineData" />

    <mx-chart width="128" height="48" type="line" :data.prop="lineData" :options.prop="sparklineOptions" />

lineData: {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  datasets: [
    {
      label: 'Example data',
      data: [435, 321, 532, 801, 1231, 1098, 732, 321, 451, 482, 513, 397],
      borderColor: '#d93b65'
    },
  ]
},

1
2
3
4
5
6
7
8
9

sparklineOptions: {
  maintainAspectRatio: false,
  elements: {
    point: {
      radius: 0
    },
  },
  scales: {
    x: {
      display: false,
    },
    y: {
      display: false
    }
  },
  plugins: {
    legend: false,
    title: false,
    tooltip: false
  },
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Bar charts

  <mx-chart type="bar" :data.prop="barData" />

barData: {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  datasets: [
    {
      label: 'Example data',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
    },
  ]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Pie and doughnut charts

<mx-chart width="320" type="pie" :data.prop="pieData" />
<mx-chart width="320" type="doughnut" :data.prop="pieData" />

pieData: {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'Example data',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
  }]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Mixed charts

It is possible to combine chart types. Instead of setting the type prop, set the type within each dataset individually.

  <mx-chart :data.prop="mixedData" />

mixedData: {
  labels: ['January', 'Febrary', 'March', 'April'],
  datasets: [{
    type: 'line',
    label: 'Line data',
    data: [10, 15, 55, 40],
  }, {
    type: 'bar',
    label: 'Bar data',
    data: [10, 30, 60, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(20, 205, 86, 0.2)',
    ]
  }]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# mx-chart

# Properties

Property	Attribute	Description	Type	Default
`data`	--	The labels and datasets to render. See the Chart.js documentation (opens new window).	`ChartData<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>`	`undefined`
`elAriaLabel`	`el-aria-label`	The aria-label attribute for the inner canvas element.	`string`	`'Chart'`
`height`	`height`	Explicit height in pixels	`number`	`undefined`
`options`	--	See the Chart.js documentation (opens new window).	{ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; indexAxis?: "x" \\| "y"; clip?: number \\| false \\| _DeepPartialObject<ChartArea>; color?: string \\| _DeepPartialObject<CanvasGradient> \\| _DeepPartialObject<CanvasPattern> \\| ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); backgroundColor?: string \\| _DeepPartialObject<CanvasGradient> \\| _DeepPartialObject<CanvasPattern> \\| ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); borderColor?: string \\| _DeepPartialObject<CanvasGradient> \\| _DeepPartialObject<CanvasPattern> \\| ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); font?: _DeepPartialObject<Partial<FontSpec>>; responsive?: boolean; maintainAspectRatio?: boolean; resizeDelay?: number; aspectRatio?: number; locale?: string; onResize?: (chart: Chart<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>, size: { width: number; height: number; }) => void; devicePixelRatio?: number; interaction?: _DeepPartialObject<CoreInteractionOptions>; hover?: _DeepPartialObject<CoreInteractionOptions>; events?: _DeepPartialArray<keyof HTMLElementEventMap>; onHover?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>) => void; onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>) => void; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<number \\| Partial<ChartArea>, ScriptableContext<keyof ChartTypeRegistry>>; }>>; parsing?: false \\| _DeepPartialObject<{ [key: string]: string; }>; normalized?: boolean; animation?: false \\| _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number \\| ScatterDataPoint \\| BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; }>; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>>; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>>; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>>; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }>; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }>; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }>; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }>; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }>; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<"radialLinear" \\| keyof CartesianScaleTypeRegistry>; }>; }	`undefined`
`type`	`type`	The type of chart to render. For mixed charts, set the `type` in the dataset instead.	`"bar" \\| "bubble" \\| "doughnut" \\| "line" \\| "pie" \\| "polarArea" \\| "radar" \\| "scatter"`	`undefined`
`width`	`width`	Explicit width in pixels	`number`	`undefined`

# Methods

# `update() => Promise<void>`

Force the chart to rerender.

# Returns

Type: Promise<void>

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Cards Chips →