`Visualization`

This component grabs the data and config from the query context and renders the appropriate visualization. You can customize the width and height by passing numeric pixel values to those properties.

Property	Values	Notes
width	number (in pixels)	Default 100% when prop is undefined.
height	number (in pixels)	Default 500px when prop is undefined.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345'>
   <Visualization
      width={1000}
      height={500}
    />
</Query>

`Query`

Query integrates with our JavaScript API to handle the request/response cycle and to grab a query response by the query ID or slug. You can pass vis config overrides to be merged with the API response, and have all the data loaded into React context.

Property	Values	Notes
`query`	number \| string	Can accept either a query slug (`3fdrdE0b3ATltUvXBaSOPN`) or numeric query ID (`1234`). If you have access to the numeric query ID, starting from this value can save one additional server request. `Query` accepts either the `query` prop or the `dashboard` prop, but not both.
`dashboard`	number	Can accept a numeric dashboard ID (`1234`). If you have access to the numeric dashboard ID, starting from this value can save one additional server request. `dashboard` does not accept the string IDs of LookML dashboards. `Query` accepts either the `query` prop or the `dashboard` prop, but not both.
`config`	See chart documentation later on this page for supported values.	Set the chart type and other associated values.
`LoadingIndicator`	component reference	Accepts an unmounted component reference. Default: `ProgressCircular`

import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Area chart properties

Property	Values	Notes
`type`	`'area'`
`legend`	`false` (to disable) OR `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Sets legend position or disables the legend by setting it to `false`. Default: `{ position: 'bottom' }`
`positioning`	`'overlay' \| 'stacked' \| 'percent'`	Chart stacking mode. Default: `'overlay'`
`render_null_values`	boolean	Treats null values as 0. Default: `false`
`tooltips`	boolean	Enable or disable tooltips appearing when hovering over data points. Default: `true`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.
`x_axis`	x-axis configuration	See the x-axis section for configuration options and example usage.
`y_axis`	y-axis configuration	See the y-axis section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

`series`

The series property can either accept an array of series configurations, or a named object overriding a specific series in your response.

Property	Values	Notes
`color`	string	Hex code
`label`	string
`line_width`	number	Set the line stroke width in pixels. Default: 3
`shape`	`'circle' \| 'diamond' \| 'square' \| 'triangle' \| 'triangle-down'`	Set point shape. Default: `'circle'`
`style`	`'none' \| 'filled' \| 'outline'`	Set point style. Default: `'none'` (points disabled)
`visible`	boolean	Show or hide the data series. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

`x_axis`

Even though our charts only currently support a single x-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the x-axis label. Default: `false` (no label)
`reversed`	boolean	Reverses the order of the data points. Default: `false`
`values`	boolean	Show or hide the values rendered along the axis. Default: true

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

`y_axis`

Even though our charts only currently support a single y-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the y-axis label. Default: `false` (no label)
`range`	[number (min) \| `'auto'`, number (max) \| `'auto']`	Sets the min and max value of the y-axis. Setting min to `'auto'` defaults to 0, and setting max to `'auto'` defaults to the maximum data point value in the set. Default: `['auto' \| 'auto']`
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Bar and column chart properties

Property	Values	Notes
`type`	`'bar' \| 'column'`
`legend`	`false` (to disable) OR `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Sets legend position or disables the legend by setting it to `false`. Default: `{ position: ‘bottom’ }`
`positioning`	`'grouped' \| 'stacked' \| 'percent'`	Chart stacking mode. Default: `'overlay'`
`tooltips`	boolean	Enable or disable tooltips appearing when hovering over data points. Default: `true`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.
`x_axis`	x-axis configuration	See the x-axis section for configuration options and example usage.
`y_axis`	y-axis configuration	See the y-axis section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

`series`

The series property can either accept an array of series configurations, or a named object overriding a specific series in your response.

Property	Values	Notes
`color`	string	Hex code
`label`	string
`visible`	boolean	Show or hide the data series. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

`x_axis`

Even though our charts only currently support a single x-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the x-axis label. Default: `false` (no label)
`reversed`	boolean	Reverses the order of the data points. Default: `false`
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

`y_axis`

Even though our charts only currently support a single y-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the y-axis label. Default: `false` (no label)
`range`	[number (min) \| `'auto'`, number (max) \| `'auto']`	Sets the min and max value of the y-axis. Setting min to ‘auto’ defaults to 0, and setting max to ‘auto’ defaults to the maximum data point value in the set. Default: `['auto' \| 'auto']`.
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Line chart properties

Property	Values	Notes
`type`	`'line'`
`legend`	`false` (to disable) OR `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Sets legend position or disables the legend by setting it to `false`. Default: `{ position: ‘bottom’ }`
`render_null_values`	boolean	Treats null values as 0. Default: `false`
`tooltips`	boolean	Enable or disable tooltips appearing when hovering over data points. Default: `true`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.
`x_axis`	x-axis configuration	See the x-axis section for configuration options and example usage.
`y_axis`	y-axis configuration	See the y-axis section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

`series`

The series property can either accept an array of series configurations, or a named object overriding a specific series in your response.

Property	Values	Notes
`color`	string	Hex code
`label`	string
`line_width`	number	Set the line stroke width in pixels. Default: 3
`shape`	`'circle' \| 'diamond' \| 'square' \| 'triangle' \| 'triangle-down'`	Set point shape. Default: `'circle'`
`style`	`'none' \| 'filled' \| 'outline'`	Set point style. Default: `'none'` (points disabled)
`visible`	boolean	Show or hide the data series. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

`x_axis`

Even though our charts only currently support a single x-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the x-axis label. Default: `false` (no label)
`reversed`	boolean	Reverses the order of the data points. Default: `false`
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

`y_axis`

Even though our charts only currently support a single y-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the y-axis label. Default: `false` (no label)
`range`	[number (min) \| `'auto'`, number (max) \| `'auto']`	Sets the min and max value of the y-axis. Setting min to ‘auto’ defaults to 0, and setting max to ‘auto’ defaults to the maximum data point value in the set. Default: `['auto' \| 'auto']`.
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Scatter chart properties

Property	Values	Notes
`type`	`'scatter'`
`legend`	`false` (to disable) OR `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Sets legend position or disables the legend by setting it to `false`. Default: `{ position: 'bottom' }`
`render_null_values`	boolean	Treats null values as 0. Default: `false`
`tooltips`	boolean	Enable or disable tooltips appearing when hovering over data points. Default: `true`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.
`x_axis`	x-axis configuration	See the x-axis section for configuration options and example usage.
`y_axis`	y-axis configuration	See the y-axis section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

`series`

The series property can either accept an array of series configurations, or a named object overriding a specific series in your response.

Property	Values	Notes
`color`	string	Hex code
`label`	string
`line_width`	number	Used to set the size of points in a scatterplot. Think of it as the outline value of each point. Default: `3`
`shape`	`'circle' \| 'diamond' \| 'square' \| 'triangle' \| 'triangle-down'`	Set point shape. Default: `'circle'`
`style`	`'none' \| 'filled' \| 'outline'`	Set point style. Default: `'none'` (points disabled)
`size_by`	`false` \| string	Series name for which to calibrate the size of each point. Set `false` to disable dynamic point sizing. Default: `false`
`visible`	boolean	Show or hide the data series. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>


/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

`x_axis`

Even though our charts only currently support a single x-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the x-axis label. Default: `false` (no label)
`reversed`	boolean	Reverses the order of the data points. Default: `false`
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

`y_axis`

Even though our charts only currently support a single y-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`gridlines`	boolean	Show or hide vertical gridlines. Default: `false`.
`label`	`false` (to hide label) \| string (value to render)	Sets the value to render as the y-axis label. Default: `false` (no label)
`range`	[number (min) \| `'auto'`, number (max) \| `'auto']`	Sets the min and max value of the y-axis. Setting min to ‘auto’ defaults to 0, and setting max to ‘auto’ defaults to the maximum data point value in the set. Default: `['auto' \| 'auto']`.
`values`	boolean	Show or hide the values rendered along the axis. Default: `true`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Single value chart properties

Property	Values	Notes
`type`	`'single_value'`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

Sparkline chart properties

Property	Values	Notes
`type`	`'sparkline'`
`render_null_values`	boolean	Treats null values as 0. Default: `false`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.
`y_axis`	y-axis configuration	See the y-axis section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

`series`

Although Sparkline inherently only supports a single series, we maintain an API pattern involving named or array series overrides in order to stay consistent with the other chart types in our library.

Property	Values	Notes
`color`	string	Hex code
`line_width`	number	Set the line stroke width in pixels. Default: `3`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>


/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

`y_axis`

Even though our charts only currently support a single y-axis, our API is future-proofed and is structured to support the configuration of multiple axes.

Property	Values	Notes
`range`	[number (min) \| `'auto'`, number (max) \| `'auto']`	Sets the min and max value of the y-axis. Setting min to ‘auto’ defaults to 0, and setting max to ‘auto’ defaults to the maximum data point value in the set. Default: `['auto' \| 'auto']`.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

Table chart properties

Property	Values	Notes
`type`	`'table'`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{ type: 'table' }}
>
  <Visualization />
</Query>

Pie chart properties

Property	Values	Notes
`type`	`'pie'`
`legend`	`false` (to disable) \| legend configuration	Setting to `false` disables the legend. Default: enabled. See the legend section for configuration options and example usage when enabled.
`tooltips`	boolean	Enable or disable tooltips appearing when hovering over data points. Default: `true`
`series`	series in `view_name.field_name` format	See the series section for configuration options and example usage.

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

`legend`

The legend property can accept the following legend configurations:

Property	Values	Notes
`type`	`'labels' \| 'legend'`	`labels` places labels pointing directly to each slice. `legend` places a separate legend. Default: `'legend'`
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	Position the legend when `type: 'legend'`. Default: `'right'`
`width`	number	Maximum width of the legend in pixels when `type: 'legend'`. Default: `300`
`value`	`'label' \| 'label_value' \| 'value' \| 'percent' \| 'label_percent'`	Sets the legend content: label, label and value, value, percent, label and percent. Default: `'label_percent'`

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

`series`

Unlike Cartesian charts, each data point in a pie chart gets treated as a new series:

Property	Values	Notes
`color`	string	Hex code

Example usage:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>

Articles in this section

Visualization and Query property tables

`Visualization`

`Query`

Area chart properties

`series`

`x_axis`

`y_axis`

Bar and column chart properties

`series`

`x_axis`

`y_axis`

Line chart properties

`series`

`x_axis`

`y_axis`

Scatter chart properties

`series`

`x_axis`

`y_axis`

Single value chart properties

Sparkline chart properties

`series`

`y_axis`

Table chart properties

Pie chart properties

`legend`

`series`