npm package: @licuido-ui/ui_line-chart
Description: 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 p
Latest version: 0.0.1

# 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](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_line-chart
```

## Image

![alt text](./lineChart.png)

## Import component

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

## Usage

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

## Props

| **Property**            | **Type**                                          | **Description**                                                       | **Default Value** |
| ----------------------- | ------------------------------------------------- | --------------------------------------------------------------------- | ----------------- |
| **LineChartProps**      |                                                   |                                                                       |                   |
| **className**           | string                                            | Represents the class name for the LineChart component.                | ''                |
| **sx**                  | SxProps<Theme>                                    | 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 &#124; ApexNonAxisChartSeries | Represents the series for the ApexCharts.                             | []                |
| **headerComponent**     | string &#124; React.ReactNode                     | Represents the header component for the LineChart.                    | undefined         |
| **width**               | string &#124; number                              | Represents the width of the LineChart component.                      | '100%'            |
| **height**              | string &#124; 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

```jsx
<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],
    },
  ]}
/>
```