> ## Documentation Index
> Fetch the complete documentation index at: https://quill.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

> The Chart view of a Quill Report

```tsx App.tsx theme={null}
import { QuillProvider, Chart } from "@quillsql/react";

const MyChart = () => (
  <QuillProvider
    tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
    publicKey={process.env.QUILL_PUBLIC_KEY}
  >
    <Chart reportId="664283fb4db8ad000bfe54d7" />
  </QuillProvider>
);
```

A simple component that displays the given data in one of many chart types.

<Info>Make sure `QuillProvider` is a parent of the `Chart` component.</Info>

### Automatically fetch data by id

If you know the id of the chart you would like to display, you can pass in the reportId to the Chart component and it will load and display the data for that chart.

```jsx theme={null}
import { QuillProvider, Chart } from "@quillsql/react";

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey={process.env.QUILL_PUBLIC_KEY}
    >
      <Chart reportId="664283fb4db8ad000bfe54d7" />
    </QuillProvider>
  );
}
```

## Props

<ParamField path="reportId" type="string">
  The chart id. The most usage is through a detail page built to navigate from
  the dashboard - using the onClick callback to get the reportId, and
  navigating to a route (say, reports/:id) where the url param is passed in as
  the reportId. For a standalone table, you can find the reportId in the Quill
  BI Platform and pass it in directly.

  When config is passed, the chart will not refetch the given report and will
  instead simply render the report it was given.

  <Info>A `config` must be passed if `reportId` is not present.</Info>
</ParamField>

<ParamField path="colors" type="string[]">
  A list of color strings used to color the chart.

  For example, a pie chart would use the colors for each section and a bar
  chart would use the colors for each bar.
</ParamField>

<ParamField path="isAnimationActive" type="boolean">
  Whether to show animations on render complete.
</ParamField>

<ParamField path="hideXAxis" type="boolean">
  Whether to hide the x axis.
</ParamField>

<ParamField path="hideYAxis" type="boolean">
  Whether to hide the y axis.
</ParamField>

<ParamField path="hideCartesianGrid" type="boolean">
  Whether to hide the cartesian grid lines.
</ParamField>

<ParamField path="hideDateRangeFilter" type="boolean">
  Whether the date range filter should be hidden.
</ParamField>

<ParamField path="hideHorizontalCartesianGrid" type="boolean" default={false}>
  Whether to hide the horizontal cartesian grid lines.
</ParamField>

<ParamField path="hideVerticalCartesianGrid" type="boolean" default={true}>
  Whether to hide the vertical cartesian grid lines.
</ParamField>

<ParamField path="hideSubsequentXAxisTicks" type="boolean" default={false}>
  Whether to hide the all but the first of the X-Axis ticks.
</ParamField>

<ParamField path="cartesianGridLineStyle" type="'solid' | 'dashed'" default={"solid"}>
  Whether the cartesian grid lines show as dashed or solid.
</ParamField>

<ParamField path="cartesianGridLineColor" type="string">
  The color of cartesian grid lines.
</ParamField>

<ParamField path="comparisonLineStyle" type="'solid' | 'dashed'" default={"solid"}>
  Whether the comparison range shows as dashed for date comparison line charts
  (as opposed to the default solid line).
</ParamField>

<ParamField path="mapColorsToFields" type="(report: QuillReport, theme: QuillTheme) => ColorMapType">
  An optional function that takes a report and theme and returns a map of keys
  used in that report to the colors they should use.

  The color values support RGB hexcodes and CSS color literals.

  ```js theme={null}
  function mapColorsToFields(report, theme): ColorMapType {
  	return {
  		amount: {
  			primary: 'red',
  			comparison: 'gray',
  			primaryGradientStart: 'red',
  			primaryGradientStop: 'lightred',
  			comparisonGradientStart: '#EFEFEF',
  			comparisonGradientStop: '#EFEFEF00',
  		},
  		total: {
  			primary: 'red'
  		},
  	};
  }
  ```

  ### ColorMapType

  <Expandable title="ColorMapType">
    ```ts theme={null}
    export type ColorMapType = {
    	[field: string]: {
    		primary: string;
    		comparison?: string;
    		primaryGradientStart?: string;
    		primaryGradientStop?: string;
    		comparisonGradientStart?: string;
    		comparisonGradientStop?: string;
    	};
    }
    ```
  </Expandable>
</ParamField>

<ParamField path="className" type="string">
  Styles the top-level container of the Chart.

  This can be useful for TailwindCSS-style classname strings.
</ParamField>

<ParamField path="containerStyle" type="React.CSSProperties">
  The CSS styles that wrap the chart.
</ParamField>