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

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