npm package: @licuido-ui/ui_bar-chart
Description: A bar chart is a popular and effective data visualization tool used to represent categorical data with rectangular bars. Each bar's length or height corresponds to the value it represents, allowing for a quick comparison between different categories. Bar 
Latest version: 1.0.1

# Bar Chart

A bar chart is a popular and effective data visualization tool used to represent categorical data with rectangular bars. Each bar's length or height corresponds to the value it represents, allowing for a quick comparison between different categories. Bar charts are particularly useful for displaying discrete data points and comparing the relative sizes or quantities of different groups or categories.

### Author

- @author Raslan <raslan@crayond.co>

[Story Book Link to Slider](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/bar-chart
```

# Image

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

## Import component

```jsx
import { BarChart } from '@licuido-ui/bar-chart';
```

```jsx
<BarChart option={{}} series={[]} />
```

## Image

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

## 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'            |

## Option 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
<BarChart
        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: 5,
              distributed: false,
              horizontal: false,
            },
          },
          tooltip: {
            enabled: true,
            style: {
              fontSize: '12px',
            },
            // Customize tooltip if needed
             custom: function ({ series, dataPointIndex }: any) {
              let tooltipContent = '<div style=“background-color: #fff; padding: 5px; border: 1px solid #E3E3E3;“>';
              series.map((singleSeries: any) => {
                tooltipContent += '<div>';
                tooltipContent += `<span>${singleSeries[dataPointIndex]}</span>`;
                tooltipContent += '</div>';
              });
              tooltipContent += '</div>';
              return tooltipContent;
            },
          },
          dataLabels: {
            enabled: false,
            style: {
              colors: ['black'],
            },
          },
          title: {
            text: 'Company',
            align: 'center',
          },
          subtitle: {
            text: 'policy',
            align: 'center',
          },
          grid: {
            row: {
              colors: ['#f3f3f3', 'transparent'],
              opacity: 0.5,
            },
          },
        }}
        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],
          },
        ]}
        width={500}
        height={300}
      />
```