open-index/open-npm huggingface dataset:
npm package: @questlabs/react-graphs
Description: To install the Quest App Graph component, you can use either npm or yarn:
Latest version: 1.0.2

## Quest React Graph

### Installation

To install the Quest App Graph component, you can use either npm or yarn:

```bash
npm install @questlabs/react-graphs or yarn add @questlabs/react-graphs
```

After installing the package, make sure to import the CSS file for styling:

```javascript
import '@questlabs/react-graphs/dist/style.css';
```

### Usage

Here's how you can use the `<Chart>` component in your React application:

```javascript
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](https://docs.questlabs.ai/) of '@questlabs/react-graphs'.