# Floating Bar Chart

## Component Visuals

{% tabs %}
{% tab title="Overview" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F92OGbJE0m7rSbIDzzHux%2FFloating%20Bar%20Chart.png?alt=media&#x26;token=74106439-34d6-41e3-b6cf-fd132d0a28d9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FSwfx0balqAjUiBecg0Mk%2FFloating%20Bar%20Chart%20v1.png?alt=media&#x26;token=ec85d8a5-bb70-4292-ac05-4f1fea836fe2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FGCtuIT6TqUgXf0iddtMf%2FFloating%20Bar%20Chart%20v2.png?alt=media&#x26;token=87250580-063f-464d-8a86-aba0676a33fb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F298yQUawTiMV5LzNAMcu%2FFloating%20Bar%20Chart%20v3.png?alt=media&#x26;token=b9fe29be-3f97-41df-83e8-c94bb6c5172a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Installation

To use the `Chart` component, you need to install the Quest Labs React SDK:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```bash
npm install @questlabs/react-graphs
```

> This command will download and install the package and its dependencies into your project.

*Note: The Quest Labs React Graph SDK includes ECharts as a dependency. When you install `@questlabs/react-graphs`, ECharts will be automatically installed as well. ECharts is a powerful charting library used by the Quest Labs SDK to render various types of charts, including the* `Chart.Bar` *component.*

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

### Features

The `Chart.Bar` component from Quest Labs SDK offers powerful features for creating interactive and visually appealing line charts in your React applications:

* **Theme Support:** Customize the appearance of the line chart using themes. Themes allow you to define colors, fonts, and other visual properties to match your application's design system.
* **Data-driven:** Visualize data easily with the `Chart.Bar` component by providing an array of data points. Each data point consists of x and y coordinates, enabling you to display trends and patterns over time or other variables.
* **Tooltip Integration:** Easily add tooltips to display additional information when users hover over data points. Tooltips enhance interactivity and provide contextual details about data values.
* **Event Callbacks:** Utilize event callbacks such as `onChartLoad`, `onChartLoaded`, and `onChartInitialized` to handle chart loading states, data retrieval, and initialization. These callbacks help manage chart lifecycle events efficiently.
* **React Integration:** Built with React in mind, the `Chart.Bar` component integrates smoothly into React applications. It leverages React's state management and component lifecycle methods for efficient data handling and rendering.

### Props

`Chart` component props

| Prop Name              | Type                                     | Required | Details                                                                                          |
| ---------------------- | ---------------------------------------- | -------- | ------------------------------------------------------------------------------------------------ |
| **children**           | JSX.Element \| JSX.Element\[]            | No       | The children components to be rendered inside the chart container.                               |
| **chartId**            | string                                   | No       | The unique identifier for the chart. Generated through QuestApp.                                 |
| **theme**              | object                                   | No       | The theme configuration for the chart.                                                           |
| **data**               | (BarChartDataset \| LineChartDataset)\[] | No       | The dataset for the chart. Each data object should follow the `ChartDataset` type structure.     |
| **setData**            | function                                 | No       | The function to set the dataset. It can accept `SetStateAction` for various chart datasets.      |
| **onChartInitialized** | function                                 | No       | Callback function invoked when the chart is initialized.                                         |
| **onChartLoaded**      | function                                 | No       | Callback function invoked when the chart data is loaded. Optional parameter for the loaded data. |
| **onChartLoad**        | function                                 | No       | Callback function invoked when the chart starts loading.                                         |
| **height**             | string \| number                         | No       | The height of the chart container.                                                               |
| **width**              | string \| number                         | No       | The width of the chart container.                                                                |

`Chart.Scatter` component props

| Prop Name     | Type             | Required | Details                                                                                       |
| ------------- | ---------------- | -------- | --------------------------------------------------------------------------------------------- |
| **legend**    | object           | No       | The configuration for the chart legend, including position, formatter, icon, and text styles. |
| **grid**      | object           | No       | The configuration for the chart grid, including position and label containment.               |
| **xAxis**     | Axis             | No       | The configuration for the x-axis, including type, visibility, formatter, and styles.          |
| **yAxis**     | Axis             | No       | The configuration for the y-axis, including type, visibility, formatter, and styles.          |
| **toolbox**   | object           | No       | The configuration for the toolbox component.                                                  |
| **tooltip**   | object           | No       | The configuration for the tooltip, including styles and alignment options.                    |
| **zoom**      | object           | No       | The configuration for zooming, including enabling wheel/slider zoom, start/end, and styles.   |
| **resizable** | boolean          | No       | Whether the chart is resizable.                                                               |
| **height**    | string \| number | No       | The height of the line chart container.                                                       |
| **width**     | string \| number | No       | The width of the line chart container.                                                        |
| horizontal    | boolean          | No       | Change bar's orientation                                                                      |

### Types

```typescript
type BarChartDataset = {
    id?: string;
    data: number[] | number[][];
    name?: string;
    cursor?: 'auto' | 'default' | 'pointer' | 'move' | 'text' | 'wait' | 'help' | 'not-allowed' | 'crosshair' | 'grab'| 'grabbing' | 'zoom-in' | 'zoom-out';
    extraData?: any;
    show?: boolean;
    type: 'bar' | 'line';
    stack?: string;
    barStyle?: Style & BorderStyle & ShadowStyle;
    animationDelay?: number;
    animationDuration?: number;
    animationEasing?: "backIn" | "backInOut" | "backOut" | "bounceIn" | "bounceInOut" | "bounceOut" | "circularIn" | "circularInOut" | "circularOut" | "cubicIn" | "cubicInOut" | "cubicOut" | "quinticIn" | "quinticInOut" | "quinticOut" | "sinusoidalIn" | "sinusoidalInOut" | "sinusoidalOut" | "elasticInOut" | "elasticout" | "exponentialIn" | "exponentialInOut" | "exponentialOut" | "linear" | "quadraticIn" | "quadraticInOut" | "quadraticout" | "quarticIn" | "quarticInOut" | "quarticout";
}

type Axis = {
    type?: 'time' | 'category' | 'log' | 'value';
    show?: boolean;
    formatter?: string | ((param: string) => string);
    showSplitLine?: boolean;
    showAxisLine?: boolean;
    splitLineStyle?: LineStyle;
    axisLineStyle?: LineStyle;
    labelStyle?: FontStyle & TextBorderStyle & TextShadowStyle & {
        fontFamily?: string;
        fontSize?: number | string;
        fontWeight?: 'bold' | 'bolder' | 'lighter' | 'normal';
        fontStyle?: 'italic' | 'normal' | 'oblique';
        textBorderWidth?: number;
        textBorderColor?: string;
        textBorderType?: 'dashed' | 'dotted' | 'solid';
        textBorderDashOffset?: number;
        textShadowBlur?: number;
        textShadowColor?: string;
        textShadowOffsetX?: number;
        textShadowOffsetY?: number;
        margin?: number;
        align?: Align;
        verticalAlign?: 'bottom' | 'middle' | 'top';
        color?: string;
    },
    min?: number;
    max?: number;
    data?: string[] | number[];
    boundaryGap?: string | [string, string]
}
```

### Usage

To integrate the `Chart.Bar` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Chart.Bar`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-graphs/dist/style.css'
```

* **Import the Chart Component**: Import the `Chart`component from the `@questlabs/react-graphs` package.

```jsx
import { Chart } from '@questlabs/react-graphs';
```

## Example Usage

Here's an example of how to use the `Chart.Bar`  component within your React application.

<pre class="language-typescript"><code class="lang-typescript"><strong>import { Chart } from '@questlabs/react-graphs';
</strong>import type { BarChartDataset } from '@questlabs/react-graphs';
import '@questlabs/react-graphs/dist/style.css'

const barChartData: BarChartDataset[] = [
  {
    type: 'bar',
    name: 'Online Sales',
    data: [10, 20, 30, 40, 10, 0, 20]
  },
  {
    type: 'line',
    name: 'Offline Sales',
    data: [10, 20, 30, 40, 10, 0, 20]
  }
]

function App() {

  return (
    &#x3C;div style={{display: 'grid', placeItems: 'center', height: '100vh', background: 'whitesmoke'}}>
      &#x3C;Chart data={barChartData} style={{width: 400}}>
        &#x3C;Chart.Header>
          &#x3C;Chart.Title>
            Step Chart
          &#x3C;/Chart.Title>
          &#x3C;Chart.Option onSelect={console.log}>
            &#x3C;Chart.Item label="Last 90 days" value="LAST_90D" />
            &#x3C;Chart.Item label="Last 90 days" value="LAST_90D" />
          &#x3C;/Chart.Option>
          &#x3C;Chart.Info>
            This is my bar chart component
          &#x3C;/Chart.Info>
        &#x3C;/Chart.Header>
        &#x3C;div style={{ padding: '10px 20px', display: 'flex', gap: 10 }}>
          &#x3C;Chart.DatePicker value="03-05-2020" label="Start Date" />
          &#x3C;Chart.DatePicker value="03-05-2024" label="End Date" />
        &#x3C;/div>
        &#x3C;Chart.Bar xAxis={{ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }}/>
        &#x3C;Chart.Footer />
      &#x3C;/Chart>
    &#x3C;/div>
  );
}

</code></pre>

You can fully customize the chart layout and use the `useChart<ChartContextSingleType>` hook provided by `@questlabs/react-graphs`. This hook provides various options.<br>

```typescript
type ChartContextSingleType<T extends ChartDataset> = {
    theme?: Record<string, string>;
    data: T[];
    setData: React.Dispatch<SetStateAction<T[]>>;
    loading: boolean;
    getChartId: () => string;
    setChartId: (chartId: string) => void;
    getQuery: () => string;
    setQuery: (queryString: string) => void;
    refetch: (props?: {chartId?: string, query?: string}) => Promise<T>;
    title?: string;
}
```

### Demo

Check a demo video for better understanding.

{% embed url="<https://drive.google.com/file/d/1PQYcT8lZZyLeAOs3t0KkyBKHSb1YaJQH/view?usp=sharing>" %}