Stepped Line Chart
Analyze step-by-step engagement changes, feature adoption, and benchmark achievements to boost activity, promote lesser-used functionalities, and enhance performance.
Component Visuals
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:
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.Line
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.Line
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.Line
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
, andonChartInitialized
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.Line
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 | LineChartDataset[] | No | The dataset for the chart. Each data object should follow the |
setData | function | No | The function to set the dataset. It can accept |
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.Line
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. |
Types
Usage
To integrate the Chart.Line
component into your React application, follow these steps
Import the CSS: In your JavaScript or TypeScript file where you're using the
Chart.Line
, import the CSS styles for the component. This ensures that the component's styling is applied correctly.
Import the Chart Component: Import the
Chart
component from the@questlabs/react-graphs
package.
Example Usage
Here's an example of how to use the Chart.Line
component within your React application.
You can fully customize the chart layout and use the useChart<ChartContextSingleType>
hook provided by @questlabs/react-graphs
. This hook provides various options.
Demo
Check a demo video for better understanding.
Last updated