Chart

The <x-chart> component is a wrapper around Chart.js charts.

<x-chart
	type="line"
	:labels="$labels"	 
	:datasets="$data"
	:options="$options"
/>

labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
data = [
  [
	'label' => 'Dataset 1',
	'cubicInterpolationMode' => 'monotone',
	'data' => [65, 59, 80, 84, 56, 55, 40],
	'borderColor' => 'rgb(50, 132, 255)',
	'backgroundColor' => 'rgb(50, 132, 255)',
	'borderWidth' => 1
  ],
  [
	'label' => 'Dataset 2',
	'data' => [38, 65, 75, 60, 75, 22, 48],
	'borderColor' => 'rgb(255, 99, 132)',
	'backgroundColor' => 'rgb(255, 99, 132)',
	'borderWidth' => 1,
	'tension' => 0.4
  ],
  [
	'label' => 'Dataset 3',
	'cubicInterpolationMode' => [],
	'data' => [10, 44, 30, 35, 50, 80, 75],
	'borderColor' => 'rgb(75, 192, 192)',
	'backgroundColor' => 'rgb(75, 192, 192)',
	'borderWidth' => 1
  ]
];
options = [
  'plugins' => [
	'legend' => ['display' => true],
	'title' => [
	  'display' => true,
	  'text' => 'Data in a chart',
	  'padding' => ['top' => 10, 'bottom' => 30]
	]
  ],
  'scales' => [
  	'y' => ['beginAtZero' => true]
  ]
];

#Include addin scripts

Use the include / plugins attributes to add scripts to your chart, such as the one in charge of adding labels to the below piechart:

<x-chart
	type="pie"
	dark-class
	:plugins="$plugins"
	:include="$include"
	:labels="$labels"
	:datasets="$data"	 
	:options="$options"
/>

include = ['https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2'];
plugins = ['ChartDataLabels'];
labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
data = [
  [
	'data' => [184, 191, 154, 78, 44, 92, 166],
	'backgroundColor' => [
      'rgba(255, 99, 132, 0.6)',
      'rgba(255, 159, 64, 0.6)',
      'rgba(255, 205, 86, 0.6)',
      'rgba(75, 192, 192, 0.6)',
      'rgba(54, 162, 235, 0.6)',
      'rgba(70, 120, 255, 0.6)',
      'rgba(201, 100, 207, 0.6)'
    ]
  ]
];
options = [
  'plugins' => [
	'datalabels' => [
	  'labels' => [
		'value' => [
		  'font' => ['size' => 24]
		]
	  ]
    ],
	'legend' => ['display' => true],
	'title' => [
	  'display' => true,
	  'text' => 'Colored pie chart',
	  'padding' => [
		'top' => 10,
		'bottom' => 30
	  ]
	],
    'tooltip' => ['enabled' => false]
  ],
  'tooltip' => ['enabled' => false]
];