Line Charts

The Line Charts components helps you to simply create a beautiful line 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.

Default Line Chart

// NextJS Material Dashboard 2 Examples import DefaultLineChart from "/examples/Charts/LineCharts/DefaultLineChart";
Default Line Chart
Product insights

Props Information

NameTypeDefaultDescription
icon{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], component: node }{ color: "dark", component: "" }Used to set an icon for the chart.
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed 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: `label`, `color` and `data`. You can pass as many objects as you want for the datasets array.
Its a required prop.

Gradient Line Chart

PRO
// NextJS Material Dashboard 2 PRO examples import GradientLineChart from "/examples/Charts/LineCharts/GradientLineChart";
Gradient Line Chart
Visits from devices

Props Information

NameTypeDefaultDescription
icon{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], component: node }{ color: "dark", component: "" }Used to set an icon for the chart.
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed 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: `label`, `color` and `data`. You can pass as many objects as you want for the datasets array.
Its a required prop.

Progress Line Chart

PRO
// NextJS Material Dashboard 2 PRO examples import ProgressLineChart from "/examples/Charts/LineCharts/ProgressLineChart";
Tasks
480
60%

Props Information

NameTypeDefaultDescription
colors'primary''secondary''info''success''warning''error''dark'darkUsed to set the chart color.
icon*nodeUsed to set the chart icon. Its a required prop.
title*stringUsed to set the chart title. Its a required prop.
countnumberstring0Used to set the total count of items under the title of the chart.
progress*numberUsed to set the chart progress bar percentage value.
heightnumberstring6.25remUsed to set a height for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `data` keys and these keys should be an array. Its a required prop.

Reports Line Chart

// NextJS Material Dashboard 2 Examples import ReportsLineChart from "/examples/Charts/LineCharts/ReportsLineChart";
Completed Tasks
Last Campaign Performance

just updated

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the color of the chart.
title*stringUsed to set the title of the chart. Its a required prop.
descriptionnodestring""Used to set a description for the chart.
date*string""Used to set a date for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  • The `labels` should be an array.
  • The `datasets` should be an object containing the `label` and `data` keys, the `label` should be a string and the `data` should be an array.
Its a required prop.