Chart Widgets

Chart widgets in Rill Canvas allow you to visualize your data in various formats. You can create charts dynamically in the Canvas Dashboard or through individual component files. For more information, refer to our Components reference doc.

Bar Chart

Bar charts are ideal for comparing values across different categories.

Preview

Inline Code

- bar_chart:
    metrics_view: bids_metrics
    color: primary
    x:
      field: advertiser_name
      limit: 20
      showNull: true
      type: nominal
      sort: -y
    y:
      field: total_bids
      type: quantitative
      zeroBasedOrigin: true

Horizontal Bar Chart

x and y always name the field drawn on that axis. To draw the bars from left to right, which works well for long category labels or many categories, put the measure on x and the dimension on y. Sort values refer to axes, so sort: -x on y orders the categories by the measure. The same layout works for stacked_bar and stacked_bar_normalized; line and area charts always keep the dimension on x.

- bar_chart:
    metrics_view: bids_metrics
    color: primary
    x:
      field: total_bids
      type: quantitative
      zeroBasedOrigin: true
    y:
      field: advertiser_name
      limit: 20
      type: nominal
      sort: -x

Axis label orientation

Category labels on the x-axis are laid out automatically: they stay upright when they fit, tilt to 45° when they do not, and only turn vertical when the chart is too narrow for angled text. Long labels are shortened with an ellipsis; hovering a bar shows the full value in its tooltip. To force an orientation, choose Label orientation in the field settings or set labelAngle on the x field to 0 (horizontal), -45 (angled) or -90 (vertical).

Line Chart

Line charts are perfect for showing trends over time.

Preview

Inline Code

- line_chart:
    metrics_view: bids_metrics
    color:
      field: device_os
      limit: 3
      type: nominal
    x:
      field: __time
      limit: 20
      sort: -y
      type: temporal
    y:
      field: total_bids
      type: quantitative
      zeroBasedOrigin: true

Stacked Area Chart

Area charts show the magnitude of change over time with filled areas.

Preview

Inline Code

- area_chart:
    color:
      field: app_or_site
      type: nominal
    metrics_view: auction_metrics
    x:
      field: __time
      limit: 20
      showNull: true
      type: temporal
    y:
      field: requests
      type: quantitative
      zeroBasedOrigin: true

Stacked Bar Chart

Stacked bar charts show multiple data series stacked on top of each other.

Preview

Inline Code

- stacked_bar:
    color:
      field: rill_measures
      legendOrientation: top
      type: value
    metrics_view: bids_metrics
    x:
      field: __time
      limit: 20
      type: temporal
    y:
      field: clicks
      fields:
        - video_starts
        - video_completes
        - ctr
        - clicks
        - ecpm
        - impressions
      type: quantitative
      zeroBasedOrigin: true

Stacked Bar Normalized

Normalized stacked bars show proportions instead of absolute values.

Preview

Inline Code

- stacked_bar_normalized:
    color:
      field: username
      limit: 3
      type: nominal
    metrics_view: rill_commits_metrics
    x:
      field: date
      limit: 20
      type: temporal
    y:
      field: number_of_commits
      type: quantitative
      zeroBasedOrigin: true

Donut Chart

Donut charts display data as segments of a circle with a hollow center.

Preview

Inline Code

- donut_chart:
    color:
      field: username
      limit: 20
      type: nominal
    innerRadius: 50
    measure:
      field: number_of_commits
      type: quantitative
    metrics_view: rill_commits_metrics

Funnel Chart

Funnel charts show the flow through a process with decreasing/increasing values at each stage.

Preview

Inline Code

- funnel_chart:
    color: stage
    measure:
      field: total_users_measure
      type: quantitative
    metrics_view: Funnel_Dataset_metrics
    mode: width
    stage:
      field: stage
      limit: 15
      type: nominal

Heat Map

Heat maps visualize data density using color intensity across two dimensions.

Preview

Inline Code

- heatmap:
    color:
      field: total_bids
      type: quantitative
    metrics_view: bids_metrics
    x:
      field: day
      limit: 10
      type: nominal
      sort:
        - Sunday
        - Monday
        - Tuesday
        - Wednesday
        - Thursday
        - Friday
        - Saturday
    y:
      field: hour
      limit: 24
      type: nominal
      sort: y

Combo Chart

Combo charts combine different chart types (like bars and lines) in a single visualization.

Preview

Inline Code

- combo_chart:
    color:
      field: measures
      legendOrientation: top
      type: value
    metrics_view: auction_metrics
    x:
      field: __time
      limit: 20
      type: temporal
    y1:
      field: 1d_qps
      mark: bar
      type: quantitative
      zeroBasedOrigin: true
    y2:
      field: requests
      mark: line
      type: quantitative
      zeroBasedOrigin: true

Scatter Plot

Scatter plots visualize the relationship between two measures, with each point representing a data value. Points can be colored by a dimension and optionally sized by a measure. Scatter plots support interactive zooming and panning.

Interactive Controls:

• Shift + Drag: Pan the plot
• Scroll Wheel: Zoom in/out
• Double-click: Reset zoom and pan to default view

Preview

Inline Code

- scatter_plot:
    metrics_view: bids_metrics
    x:
      field: total_bids
      type: quantitative
      zeroBasedOrigin: false
    y:
      field: total_clicks
      type: quantitative
      zeroBasedOrigin: false
    dimension:
      field: advertiser_name
      limit: 10
      type: nominal
    size:
      field: total_impressions
      type: quantitative
    color:
      field: device_os
      limit: 5
      type: nominal
      legendOrientation: top