Line Chart View Source



The Line Chart component displays categories of data points on a line chart.


Usage



Create an array of data.

0
1
const data = [
2
  { id: 1, date: "December 17, 1995 03:24:00", category: "1", value: 100 },
3
  { id: 2, date: "December 17, 2000 03:24:00", category: "1", value: 150 },
4
  { id: 3, date: "December 17, 2005 03:24:00", category: "1", value: 200 },
5
  { id: 4, date: "December 17, 2007 03:24:00", category: "1", value: 100 },
6
  { id: 5, date: "December 17, 2008 03:24:00", category: "1", value: 250 },
7
  { id: 6, date: "December 17, 2010 03:24:00", category: "1", value: 110 },
8
  { id: 7, date: "December 17, 1995 03:24:00", category: "2", value: 150 },
9
  { id: 8, date: "December 17, 2000 03:24:00", category: "2", value: 200 },
10
  { id: 9, date: "December 17, 2005 03:24:00", category: "2", value: 100 },
11
  { id: 10, date: "December 17, 2010 03:24:00", category: "2", value: 150 },
12
  { id: 11, date: "December 17, 1995 03:24:00", category: "3", value: 200 },
13
  { id: 12, date: "December 17, 2000 03:24:00", category: "3", value: 100 },
14
  { id: 13, date: "December 17, 2005 03:24:00", category: "3", value: 150 },
15
  { id: 14, date: "December 17, 2010 03:24:00", category: "3", value: 200 },
16
];
17

Configure chart layout.

0
// Use this to determine how many tick marks to be written on X axis
1
const tickNumber = 4;
2
3
//Use this to choose how much of the chart is filled vertically displayMax = 500
4
const yCeiling = 400;
5
6
//Use this to choose how much of the chart is filled horizontally displayMax = 550
7
const xWall = 500;

Declare the LineChart component.

0
1
<Chart 
2
  data={data} 
3
  maxTicks={tickNumber} 
4
  yCeiling={yCeiling} 
5
  xWall={xWall} 
6
/>


Output






Props



StatCard
NameTypeDefaultDescription
data
array
null
The value listed in the header of the StatCard
maxTicks
number
null
Determine how many tick marks to be written on X axis
yCeiling
number
null
Choose how much of the chart is filled vertically
xWall
number
null
Choose how much of the chart is filled horizontally
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source