@sqlrooms/vega / VegaLiteChart

Function: VegaLiteChart()

VegaLiteChart(props, deprecatedLegacyContext?): ReactNode

A component that renders a Vega-Lite chart with SQL data and responsive sizing.

The chart can be sized in multiple ways:

• Fixed dimensions: Provide both width and height as numbers
• Fixed width, proportional height: Provide width as number, height as 'auto'
• Fixed height, proportional width: Provide height as number, width as 'auto'
• Fully responsive: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio

Parameters

Parameter	Type	Description
props	{ className: string; width: number | "auto"; height: number | "auto"; aspectRatio: number; sqlQuery: string; spec: string | VisualizationSpec; }	The component props
props.className?	string	-
props.width?	number | "auto"	The chart width in pixels, or 'auto' to use container width
props.height?	number | "auto"	The chart height in pixels, or 'auto' to calculate from aspect ratio
props.aspectRatio?	number	The desired width-to-height ratio when dimensions are auto-calculated
props.sqlQuery?	string	The SQL query to fetch data for the chart
props.spec?	string | VisualizationSpec	The Vega-Lite specification for the chart. Can be either a JSON string or a VisualizationSpec object. The data and size properties will be overridden by the component.
deprecatedLegacyContext?	any	Deprecated See React Docs

Returns

ReactNode

The rendered chart component

Examples

// Fixed size chart
<VegaLiteChart
  width={600}
  height={400}
  sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
  spec={{
    mark: 'bar',
    encoding: {
      x: {field: 'category', type: 'nominal'},
      y: {field: 'count', type: 'quantitative'}
    }
  }}
/>

// Responsive chart with 16:9 aspect ratio
<VegaLiteChart
  className="max-w-[600px]"
  aspectRatio={16/9}
  sqlQuery="SELECT date, value FROM metrics"
  spec={{
    mark: 'line',
    encoding: {
      x: {field: 'date', type: 'temporal'},
      y: {field: 'value', type: 'quantitative'}
    }
  }}
/>