Line Charts - Soft UI

Our Vue Line Chart examples are perfect to show trends and perform comparative analysis. See below:


Default Line Chart

Use the following example to create a simple and versatile line chart for your website.

Props Information

NameTypeDefaultDescription
idstringchart-lineUsed to set an id for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  1. The `labels` should be an array.
  2. The `datasets` should be an object with the following keys:
    1. `label` of type string.
    2. `data` of type array.
It is a required prop.

Gradient Line Chart

Pro

Use the following example to create eye-catching line charts for your website.

Props Information

NameTypeDefaultDescription
id*stringUsed to set an id for the chart. It is a required prop.
titlestringUsed to set a title for the chart.
descriptionstringUsed to set a description for the chart.
heightstring300Used 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.
  1. The `labels` should be an array.
  2. The `datasets` should be an object with the following keys:
    1. `label` of type string.
    2. `data` of type array.
It is a required prop.