Chart | Soft UI Dashboard React @ Creative Tim

The Mixed Chart component helps you to simply create a mix of different charts for displaying the data.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Soft UI Dashboard React examples import MixedChart from "examples/Charts/MixedChart";

Mixed Chart

Props Information

Name	Type	Default	Description
title	string	""	Used to set a title for the chart.
description	nodestring	""	Used to set a description for the chart.
height	numberstring	19.125rem	Used to set a `height` for the chart.
chart*	object		Used to set the chart data. It should be an `object` that contains the `labels` and `datasets` keys and these keys should be an `array`. The `datasets` key is an `array` of objects with the following keys: `chartType`, `label`, `color` and `data`. You can pass as many objects as you want for the datasets array. The `chartType` key is used to define the type of the chart you want to use. There are 4 types that you can use: `default-line`, `gradient-line`, `bar`, `thin-bar`. Its a required prop.