VISION  |  Docs

Bar Charts

The Bar Charts components helps you to simply create a beautiful bar chart 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.

Vertical Bar Chart

// Vision UI Dashboard React examples import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart";

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
options*objectUsed to set the chart options. It should be an object. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here.
  • The `datasets` key is an array of objects with the following keys: `label`, `color`, `data` and `borderDash`.
  • The `chart` key is an object of objects with the following keys: `type` and `toolbar`.
  • The `plotOptions` key is an object of objects with the following keys: `type` and `toolbar`.
  • The `stroke` key is an object of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array.
It's a required prop.
data*arrayUsed to set the chart data. It should be an array . It can contain and object that has the `name` and `data` keys. You can pass as many objects as you want for the data prop.
It's a required prop.

Horizontal Bar Chart

// Vision UI Dashboard React examples import HorizontalBarChart from "examples/Charts/BarCharts/HorizontalBarChart";

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
options*objectUsed to set the chart options. It should be an object. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here.
  • The `datasets` key is an array of objects with the following keys: `label`, `color`, `data` and `borderDash`.
  • The `chart` key is an object of objects with the following keys: `type` and `toolbar`.
  • The `plotOptions` key is an object of objects with the following keys: `type` and `toolbar`.
  • The `stroke` key is an object of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array.
It's a required prop.
data*arrayUsed to set the chart data. It should be an array . It can contain and object that has the `name` and `data` keys. You can pass as many objects as you want for the data prop.
It's a required prop.
Contents