# ChartJs integration component
Anytime graphs are needed to display data over a period of time.
<br>
It should be possible to display a graph like so:
```javascript
  const rawData = [
  {
    orderId: "f431e8af-f16c-4009-9a86-cb7b19cf87f2",
    orderDate: "2023-02-02",
    pricePerUnit: 11,
    quantity: 8,
    ordered: 88,
    unit: "kg"
  },
  {
    orderId: "f5b64fe0-b969-4066-a238-775bb78ae1a9",
    orderDate: "2023-02-05",
    pricePerUnit: 7.5,
    quantity: 5,
    ordered: 37.5,
    unit: "kg"
  },
  {
    orderId: "2f94c9a0-f69b-4797-80ac-2408f1f825b8",
    orderDate: "2023-02-06",
    pricePerUnit: 9,
    quantity: 14,
    ordered: 126,
    unit: "kg"
  }
];
const title = 'Short TimeRanged Line Graph from 2023/01/30 to 2023/02/15';
const startDate = "03/01/2022";
const endDate = "05/01/2022";
const legend = 'Évolution du prix HT';
const startDate = '2023-01-30';
const endDate = '2023-02-15';
const yAxisPropertyKey = 'pricePerUnit';
const xAxisPropertyKey = 'orderDate';
const tooltipTitlePropertyKey = 'orderDate';
const tooltipMinWidth = '150px';

<TimeRangedLineGraph rawData={rawData} 
                     startDate={startDate} 
                     endDate={endDate} 
                     title={title} 
                     yAxisPropertyKey={yAxisPropertyKey} 
                     xAxisPropertyKey={xAxisPropertyKey} 
                     legend={legend}
                     tooltipTitlePropertyKey={tooltipTitlePropertyKey}
                     renderTooltipHeader={renderTooltipHeader}
                     tooltipMinWidth={tooltipMinWidth}
                     renderTooltipBody={renderTooltipBody}
                     renderEmptyState={renderEmptyState} />;
```

| Props                     | Type       | Required | Default | Description                                                     |
|:--------------------------|:-----------|:--------:|:-------:|:----------------------------------------------------------------|
| `title`                   | `string`   |  `true`  |         | The title of chart component                                    |
| `rawData`                 | `array`    |  `true`  |         | The array of data to display inside the chart                   |
| `startDate`               | `string`   |  `true`  |         | Begin date of the chart                                         |
| `endDate`                 | `string`   |  `true`  |         | End date of the chart                                           |
| `yAxisPropertyKey`        | `string`   |  `true`  |         | The property to display ticks on y axis                         |
| `xAxisPropertyKey`        | `string`   |  `true`  |         | The property to display ticks on x axis                         |
| `legend`                  | `string`   | `false`  |         | Optional legend for the value displayed on the chart            |
| `tooltipTitlePropertyKey` | `string`   | `false`  |         | Optional title if we want to display tooltip                    |
| `tooltipMinWidth`         | `string`   | `false`  |         | String to style the tooltip to fit the content we gave it       |
| `renderTooltipHeader`     | `function` | `false`  |         | Optional Js function to create header inside the tooltip        |
| `renderTooltipBody`       | `function` | `false`  |         | Optional Js function to create body inside the tooltip          |
| `renderEmptyState`        | `function` | `false`  |         | Optional Empty state if value can't be displayed                |
| `chartName`               | `string`   |  `true`  |         | Name of the chart we display used as Id for canvas              |