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

const MyChart = () => (
  <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
    <Chart reportId="664283fb4db8ad000bfe54d7" />
  </QuillProvider>
);

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

Make sure QuillProvider is a parent of the Chart component.

​
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.

import { QuillProvider, Chart } from "@quillsql/react";

function App() {
  return (
    <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
      <Chart reportId="664283fb4db8ad000bfe54d7" />
    </QuillProvider>
  );
}

​
Pass data directly into the chart

Alternatively, if you have the actual data you would like to display (eg. you fetched the data using our useQuill hook) you can also pass in a QuillReport directly to the Chart component and it will display that data without async fetching.

import { QuillProvider, Chart } from "@quillsql/react";

function App() {
  const report = useQuill("664283fb4db8ad000bfe54d7");
  return (
    <QuillProvider organizationId="2" publicKey="6579031b3e41c378aa8180ec">
      <Chart config={report} />
    </QuillProvider>
  );
}

​
Props

​
reportId
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 Portal 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.

A config must be passed if reportId is not present.
​
config
QuillReport

A report to render, if any.

When a reportId is passed, the chart will first fetch the data necessary to render this chart, and then it will render the report that it receives from the server.

See the API Reference for a QuillReport here.

A reportId must be passed if config is not present.
​
colors
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.

​
isAnimationActive
boolean

Whether to show animations on render complete.

​
hideXAxis
boolean

Whether to hide the x axis.

​
hideYAxis
boolean

Whether to hide the y axis.

​
hideCartesianGrid
boolean

Whether to hide the cartesian grid lines.

​
hideDateRangeFilter
boolean

Whether the date range filter should be hidden.

​
hideHorizontalCartesianGrid
boolean
default: false

Whether to hide the horizontal cartesian grid lines.

​
hideVerticalCartesianGrid
boolean
default: true

Whether to hide the vertical cartesian grid lines.

​
hideSubsequentXAxisTicks
boolean
default: false

Whether to hide the all but the first of the X-Axis ticks.

​
cartesianGridLineStyle
'solid' | 'dashed'
default: "solid"

Whether the cartesian grid lines show as dashed or solid.

​
cartesianGridLineColor
string

The color of cartesian grid lines.

​
comparisonLineStyle
'solid' | 'dashed'
default: "solid"

Whether the comparison range shows as dashed for date comparison line charts (as opposed to the default solid line).

​
mapColorsToFields
(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.

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

ColorMapType

​
className
string

Styles the top-level container of the Chart.

This can be useful for TailwindCSS-style classname strings.

​
containerStyle
React.CSSProperties

The CSS styles that wrap the chart.

ReportBuilderTable