Bubble Chart

Compare feature usage, identify impactful analytics tools, and track benchmark progress with bubble sizes reflecting engagement, success, and goal attainment.

Component Visuals

Overview

Visual 1

Visual 2

Visual 3

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:

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.Scatter component.

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

Features

The Chart.Scatter 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 scatter 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.Scatter 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.Scatter 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	ScatterChartDataset[]	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.Scattercomponent 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 scatter chart container.
width	string | number	No	The width of the scatter chart container.

Types

type ScatterChartDataset = {
    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
    showSymbol?: boolean;
    symbolStyle?: ItemStyle<StyleWithGradient> & {
        type?: 'rect' | 'roundRect' | 'circle';
        size?: number | ((data: number | number[]) => number)
    };
    step?: 'start' | 'middle' | 'end';
    emphasis?: Style & {
        scale?: number;
        label?: any;
        focus?: 'none' | 'self' | 'series';
    };
    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.Scatter component into your React application, follow these steps

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

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

• Import the Chart Component: Import the Chartcomponent from the @questlabs/react-graphs package.

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

Example Usage

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

import React from 'react'
import { Chart, Gradient } from '@questlabs/react-graphs'
import type { ScatterChartDataset } from '@questlabs/react-graphs'
import '@questlabs/react-graphs/dist/style.css'

const bubbleChart: ScatterChartDataset[] = [
  {
    name: 'Online Sales',
    data: [-20, -40, -20, -40, -60, -40, -20].map((x, i) => [i, x, Math.random() * 30 + 5]),
    symbolStyle: {
      color:  Gradient({x: 1, y: 1, r: 3, colorStop: [{color: 'red', offset: 0}, {color: 'blue', offset: 1}]}),
      size: (data: any) => Array.isArray(data) ? data[2]:3, opacity: 1
    }
  },
  {
    name: 'Hybrid Sales',
    data: [-10, -50, 0, 40, 40, 30, 10].map((x, i) => [i, x, Math.random() * 30 + 5]),
    symbolStyle: {
      color: 'rgba(59, 5, 123, 1)',
      size: (data: any) => Array.isArray(data) ? data[2]:3
    },
  },
  {
    name: 'Offline Sales',
    data: [40, 10, 20, -30, -40, -10, 50].map((x, i) => [i, x, Math.random() * 30 + 5]),
    symbolStyle: {
      color: 'rgba(114, 0, 235, 1)',
      size: (data: any) => Array.isArray(data) ? data[2]:3
    }
  },
]

function App() {

  return (
    <div style={{display: 'grid', placeItems: 'center', height: '100vh', background: 'whitesmoke'}}>
      <Chart data={bubbleChart} 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 buble 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.Scatter xAxis={{ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }}/>
        <Chart.Footer />
      </Chart>
    </div>
  );
}

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

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.