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

const MyChart = () => (
  <QuillProvider
    tenants={{ tenantField: "customer_id", tenantIds: [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
      tenants={{ tenantField: "customer_id", tenantIds: [2] }}
      publicKey="6579031b3e41c378aa8180ec"
    >
      <Chart reportId="664283fb4db8ad000bfe54d7" />
    </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 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.
A config must be passed if reportId 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.
⌘I