# Stacked Bar Chart ## Component Visuals {% tabs %} {% tab title="Overview" %}
{% endtab %} {% tab title="Visual 1" %}
{% endtab %} {% tab title="Visual 2" %}
{% endtab %} {% tab title="Visual 3" %}
{% endtab %} {% tab title="Visual 4" %}
{% endtab %} {% tab title="Visual 5" %}
{% endtab %} {% tab title="Visual 6" %}
{% endtab %} {% tab title="Visua 7" %}
{% endtab %} {% tab title="Untitled" %} {% 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. 
import { Chart } from '@questlabs/react-graphs';
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 (
    <div style={{display: 'grid', placeItems: 'center', height: '100vh', background: 'whitesmoke'}}>
      <Chart data={barChartData} style={{width: 400}}>
        <Chart.Header>
          <Chart.Title>
            Step Chart
          </Chart.Title>
          <Chart.Option onSelect={console.log}>
            <Chart.Item label="Last 90 days" value="LAST_90D" />
            <Chart.Item label="Last 90 days" value="LAST_90D" />
          </Chart.Option>
          <Chart.Info>
            This is my bar chart component
          </Chart.Info>
        </Chart.Header>
        <div style={{ padding: '10px 20px', display: 'flex', gap: 10 }}>
          <Chart.DatePicker value="03-05-2020" label="Start Date" />
          <Chart.DatePicker value="03-05-2024" label="End Date" />
        </div>
        <Chart.Bar xAxis={{ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }}/>
        <Chart.Footer />
      </Chart>
    </div>
  );
}
You can fully customize the chart layout and use the `useChart` hook provided by `@questlabs/react-graphs`. This hook provides various options.
```typescript type ChartContextSingleType = { theme?: Record; data: T[]; setData: React.Dispatch>; loading: boolean; getChartId: () => string; setChartId: (chartId: string) => void; getQuery: () => string; setQuery: (queryString: string) => void; refetch: (props?: {chartId?: string, query?: string}) => Promise; title?: string; } ``` ### Demo Check a demo video for better understanding. {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/stacked-bar-chart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.