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

Story Book Link to Slider

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/bar-chart

Image

Import component

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

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

Image

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

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

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