Visualization and Query property tables

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.
chartTypeMap	key/value object	Accepts a key/value object that defines what component to render when the adapter system encounters specfic chart type values. This can be used to override Looker's default charts or to add new chart types to the adapter system.

Example usage:

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

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</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 qid value. 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 the Query.client_id, which comes after the qid property in an Explore's URL, (3fdrdE0b3ATltUvXBaSOPN), or a 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	Depending on type value, accepts the following properties: type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis See chart-specific documentation later on this page for supported values.	Set and override configuration settings for charts.
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 later on this page */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Area chart properties

The following are the config properties for area charts.

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 accept either 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

The following are the config properties for bar and column charts.

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 accept either 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

The following are the config properties for line charts.

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 accept either 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

The following are the config properties for scatter charts.

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 accept either 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

The following are the config properties for single value charts.

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

The following are the config properties for sparkline charts.

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

The following are the config properties for table charts.

Property	Values	Notes
type	'table'
series	series in view_name.field_name format	See the series section for configuration options and example usage.
column_order	string[]	An array of series names (for example, 'orders.count') indicating how you would like the table columns to be ordered from left to right.
show_row_numbers	boolean	Toggle the display of the totals row at the bottom of the table. Default: true
show_totals	boolean	Toggle the display of the totals row at the bottom of the table. Default: true
show_row_totals	boolean	Toggle the display of row totals on the right side of the table. Default: true
truncate_text	boolean	When true, table cell text is limited to a single line and content overflow is truncated with an ellipsis. When false, the content is allowed to wrap to multiple lines. Default: true
truncate_header	boolean	When true, table header labels are limited to a single line and content overflow is truncated with an ellipsis. When false, the headers are allowed to wrap to multiple lines. Default: true

Example usage:

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

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

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

Property	Values	Notes
cell_visualization	boolean	Toggles on or off the inline cell visualization. Defaults to true for the first measure, and false for the others.
color	string	Specify the color used to render the table cell visualization.
value_format	string	A number formatting string indicating whether to render values as currency, the floating point precision, whether to use commas or periods to delineate thousands, and so on.

Example usage:

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

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

Pie chart properties

The following are the config properties for pie charts.

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>