@questlabs/react-graphs

Quest React Graph

Installation

To install the Quest App Graph component, you can use either npm or yarn:

npm install @questlabs/react-graphs or yarn add @questlabs/react-graphs

After installing the package, make sure to import the CSS file for styling:

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

Usage

Here's how you can use the <Chart> component in your React application:

import React, { useState } from 'react';
import { Chart } from '@questlabs/react-graphs';
import type { LineChartDataset } from '@questlabs/react-graphs';

const YourComponent = () => {
  const [data, setData] = useState<LineChartDataset[]>([
  {
    name: 'Online Sales',
    data: [-20, -40, -20, -40, -60, -40, -20],
    symbolStyle: {
      color: 'rgba(101, 37, 179, 1)'
    },
  },
  {
    name: 'Offline Sales',
    data: [0, 20, 0, -20, -40, -20, -20],
    symbolStyle: {
      color: 'rgba(144, 53, 255, 1)'
    },
  },
  {
    name: 'Hybrid Sales',
    data: [-40, -20, -40, 20, 0, 20, -40],
    symbolStyle: {
      color: 'rgba(163, 87, 255, 1)'
    },
  }
]);

  return (
    <Chart data={data} setData={setData}> 
      <Chart.Header>
        <Chart.Title>
          Scatter 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 line 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.Line xAxis={{ data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }} />
      <Chart.Footer />
    </Chart>
  );
};

export default YourComponent;

This example demonstrates a Line Chart usage, but you can explore other types of charts provided by the package as well.

Documentation

For further customization and details on available props, refer to the documentation of '@questlabs/react-graphs'.