@licuido-ui/ui_line-chart NPM

Line Chart

A line chart is a fundamental tool in data visualization that is widely used to display information as a series of data points called 'markers' connected by straight line segments. It is especially effective in illustrating trends over time, making it a popular choice for visualizing data that has a continuous progression.

Author

@author Raslan raslan@crayond.co

Link

Story Book Link Table

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_line-chart

Image

alt text

Import component

import { LineChart } from '@licuido-ui/ui_line-chart';

Usage

<LineChart options={{}} series={[]} />

Props

Property	Type	Description	Default Value
LineChartProps
className	string	Represents the class name for the LineChart component.	''
sx	SxProps	Represents the style props for the LineChart component.	{}
headerStyle	SxProps	Represents the style props for the header of the LineChart component.	undefined
graphStyle	SxProps	Represents the style props for the graph in the LineChart component.	undefined
graphComponentStyle	SxProps	Represents the style props for the LineChart component.	undefined
options	ApexCharts.ApexOptions	Represents the options for the ApexCharts.	undefined
series	ApexAxisChartSeries \| ApexNonAxisChartSeries	Represents the series for the ApexCharts.	[]
headerComponent	string \| React.ReactNode	Represents the header component for the LineChart.	undefined
width	string \| number	Represents the width of the LineChart component.	'100%'
height	string \| number	Represents the height of the LineChart component.	'auto'

Options Props

Option	Description	Example Value
chart	Object containing the chart configuration, including the ID of the chart.	`{ id: 'basic-line', type: 'line' }`
xaxis	Object containing the configuration for the X-axis, such as categories for the chart.	`{ categories: [1991, 1992, 1993] }`
stroke	Object defining the curve of the line.	`{ curve: 'smooth' }`
title	Object containing the title configuration for the chart.	`{ text: 'Line Chart' }`
subtitle	Object containing the subtitle configuration for the chart.	`{ text: 'Sample Subtitle' }`
markers	Object defining the size of the markers on the chart.	`{ size: 6, strokeWidth: 0 }`
yaxis	Object containing the configuration for the Y-axis, including the title of the Y-axis.	`{ title: { text: 'Values' } }`
grid	Object defining the grid configuration for the chart, including row colors and opacity.	`{ row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 } }`
dataLabels	Object defining whether data labels are enabled or not.	`{ enabled: false }`
tooltip	Object defining the configuration for the tooltip, including enabling it and setting the font size.	`{ enabled: true, style: { fontSize: '12px' } }`

Sample Props

<LineChart
  options={{
    chart: {
      toolbar: {
        show: false,
      },
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
      position: 'bottom',
      labels: {
        style: {
          colors: 'green',
        },
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: 'green',
        },
      },
    },
    plotOptions: {
      bar: {
        borderRadius: 10,
      },
    },
    tooltip: {
      enabled: true,
      style: {
        fontSize: '12px',
      },
      // customization of tooltip if needed
      custom: function ({ series, dataPointIndex }) {
        let tooltipContent = '<div style="background-color: #fff; padding: 5px; border: 1px solid #e3e3e3;">';
        series.map((singleSeries) => {
          tooltipContent += '<div>';
          tooltipContent += `<span>${singleSeries[dataPointIndex]}</span>`;
          tooltipContent += '</div>';
        });
        tooltipContent += '</div>';
        return tooltipContent;
      },
    },
    dataLabels: {
      enabled: false,
      style: {
        colors: ['black'],
      },
    },
    fill: {
      colors: ['#F44336'],
    },
    title: {
      text: 'Company',
      align: 'center',
    },
    subtitle: {
      text: 'policy',
      align: 'center',
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'],
        opacity: 0.5,
      },
    },
    stroke: {
      curve: 'smooth',
    },
  }}
  series={[
    {
      name: 'Desktop',
      data: [30, 40, 45, 50, 49, 60, 70, 91, 100],
    },
    {
      name: 'PC',
      data: [40, 50, 65, 70, 89, 90, 95, 99, 110],
    },
  ]}
/>

@emotion/react @emotion/styled @mui/material apexcharts react react-apexcharts react-dom

@licuido-ui/react

0.0.1

8 months ago