# Chart

<flow-chart>

Stable

The chart component displays Vega and Vega-Lite charts.

The chart component is a container for Vega and Vega-Lite (opens new window) charts. To display a chart, register a chart specification and then bind data to the chart.

# Registering Chart Specifications

Vega and Vega-Lite chart specs must be registered before use using the registerSpec() method provided by the context chartSpecs object. We recommend that you prototype your chart specs using the Vega Editor (opens new window) editor before using with Flo.w RDF.

Each chart spec is registered with a unique name. Use the chart-spec attribute of the chart component to select which registered spec to use.

# Binding Data to the Chart

To bind data as a named dataset to the chart, add a flow-chart-data child element to the chart component.

...
<flow-chart-data name="data" data="$queries.myQuery.results"></flow-chart-data>
...

The data should be an array of data objects as expected by Vega/Vega-Lite. The data is available within the chart specification using the provided name. The chart spec should define a 'placeholder' dataset to receive the data.

To bind the results of a Flo.w reactive query, specify the results property of the reactive query. Alternatively, any reactive variable or a computed property containing appropriate data can be used.

# Setting Chart Width and Height

Use the width and height attributes of the chart component to set the chart dimensions in pixels.

WARNING

Vega-Lite charts do not re-size to their container width. The required width must also be specified within the Vega-Lite chart spec.

# Examples

The following example demonstrates a complex Vega chart that shows a distribution of air quality data in London at a number of locations. Data is bound to the chart using a Flo.w reactive query and a chart signal is used to pass the reactive variable selectedFeature to the chart as a signal.

<html>
<flow-chart class="flow-theme-dark" tooltip chart-spec="airQualityChart" width="600" height="300">
  <!-- bind named dataset 'data' to results of query -->
  <flow-chart-data name="data" data="$queries.allAirQuality.results"></flow-chart-data>
  <!-- bind signal 'selectedFeature' to state variable '$selectedFeature' -->
  <flow-chart-signal name="selectedFeature" value="$selectedFeature"></flow-chart-signal>
</flow-chart>
</html>
<script>

  // Register a Flo.w query to retrieve air quality data
  context.state.registerQuery(['queries', 'allAirQuality'], state => ({
    datasetId: 'airquality',
    where: { no2: { $not: null } },
    order: [['no2', 'desc']]
  }));

  // Set the reactive variable to be passed as a signal to the chart
  context.state.set('selectedFeature', 'Hounslow - Heston Road');

  // Register the chart spec
  context.chartSpecs.registerSpec('airQualityChart', {
    $schema: 'https://vega.github.io/schema/vega/v5.json',

    title: "Air Quality Distribution",
    data: [
      {
        name: 'data'
      }
    ],

    signals: [
      {
        name: 'tooltip',
        value: {},
        on: [
          { events: 'rect:mouseover', update: 'datum' },
          { events: 'rect:mouseout', update: '{}' }
        ]
      },
      { name: 'dataX', value: 'name' },
      { name: 'dataY', value: 'no2' },
      { name: 'selectedFeature', value: null }
    ],

    scales: [
      {
        name: 'xscale',
        type: 'band',
        domain: { data: 'data', field: { signal: 'dataX' } },
        range: 'width',
        round: true
      },
      {
        name: 'yscale',
        domain: { data: 'data', field: { signal: 'dataY' } },
        nice: true,
        range: 'height'
      }
    ],

    axes: [{ orient: 'left', scale: 'yscale', title: 'NO2 (ppm)' }],

    marks: [
      {
        type: 'rect',
        from: { data: 'data' },
        encode: {
          enter: {
            x: { scale: 'xscale', signal: 'datum[dataX]' },
            width: { scale: 'xscale', band: 1 },
            y: { scale: 'yscale', signal: 'datum[dataY]' },
            y2: { scale: 'yscale', value: 0 }
          },
          update: {
            fill: [{ test: 'datum[dataX] === selectedFeature', value: 'red' }, { value: 'steelblue' }]
          },
          hover: {
            fill: { value: 'green' }
          }
        }
      },
      {
        type: 'text',
        encode: {
          enter: {
            align: { value: 'center' },
            baseline: { value: 'bottom' },
            fill: { value: '#f2f2f2' }
          },
          update: {
            x: { scale: 'xscale', signal: 'tooltip.name', band: 0.5 },
            y: { scale: 'yscale', signal: 'tooltip.no2', offset: -2 },
            text: { signal: 'tooltip.name' },
            fillOpacity: [{ test: 'datum === tooltip', value: 0 }, { value: 1 }]
          }
        }
      }
    ]
  });
</script>

# Properties

Property	Description	Type	Default
`chartSpec` `chart-spec`	The registered chart specification to display.	`string`
`flowContext` `flow-context`	The Flo.w context ID to use for application state.	`string`	`'default'`
`height`	The height of the chart in pixels.	`number`	`200`
`tooltip`	Set to enable the Vega Tooltip plugin.	`boolean`	`false`
`width`	The width of the chart in pixels.	`number`	`300`

# Events

Event	Description	Type
`flowChartSignalChanged`	Emitted when a chart signal has changed.	`FlowChartSignalChangeDetails`

← Button Chart Data →