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 [email protected]

Link

Story Book Link Table

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_line-chart

Image

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