# Chart
<flow-chart>
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.
← Button Chart Data →