> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualization showcase

> Check out these examples to see what's possible in Omni!

<Columns cols={3}>
  <Card title="Calendar heatmap" href="/showcase/visualizations/calendar-heatmaps" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/calendar-heatmaps.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=3194a67710781e4d1a9aaf17f6601b5f" width="1798" height="488" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/calendar-heatmaps.png">
    Calendar cells colored by a value
  </Card>

  <Card title="Card grid" href="/showcase/visualizations/card-grid" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-grid.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=013a201d724b4b625cd940bccb892b59" width="900" height="585" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-grid.png">
    A grid of responsive cards with metrics and images
  </Card>

  <Card title="Card list" href="/showcase/visualizations/list-view" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/list_view.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=beb39b33ada0ab6b64d50be887cfd7d6" width="470" height="433" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/list_view.png">
    A vertical list of cards with metrics or details
  </Card>

  <Card title="Card with criteria checklist" href="/showcase/visualizations/card-criteria-checklist" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-criteria-checklist.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=6875a7f61a4e33b8ff9788c2f9b208d2" width="1834" height="1356" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-criteria-checklist.png">
    A card with a list of criteria
  </Card>

  <Card title="Card with strip plot" href="/showcase/visualizations/card-with-strip-plot" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-with-strip-plot.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=21568431013dc97bb8b8fdefb802bc14" width="834" height="646" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-with-strip-plot.png">
    Card with a strip plot that displays changes over time
  </Card>

  <Card title="Card with target candlesticks" href="/showcase/visualizations/card-target-candlesticks" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-target-candlesticks.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=e5cd49f6f7336851cd343e85496511ce" width="1600" height="950" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/card-target-candlesticks.png">
    Card with current vs target and conditional coloring
  </Card>

  <Card title="Cohort table" href="/showcase/visualizations/cohort-table" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/cohort-table.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=f010fc21cb581c0d78b9003a2a5bf289" width="2624" height="888" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/cohort-table.png">
    Stylized cohort table for 12 months
  </Card>

  <Card title="Colored progress bars" href="/showcase/visualizations/colored-progress-bars" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/colored-progress-bars.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=b04557fe93a917c074c67f4de3d1cdcc" width="1280" height="422" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/colored-progress-bars.png">
    Use color to reinforce level of progress
  </Card>

  <Card title="Dashboard tabs" href="/showcase/visualizations/dashboard-tabs" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dashboard-tabs.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=f0142564935e17a54bda362fa0aa5a01" width="672" height="432" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dashboard-tabs.png">
    Tabbed navigation for dashboards
  </Card>

  <Card title="Dashboard tile anchors" href="/showcase/visualizations/dashboard-tile-anchors" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dashboard-tile-anchors.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=22870a0d5973b48f89074ff6b658d599" width="1262" height="182" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dashboard-tile-anchors.png">
    Table of contents for a dashboard
  </Card>

  <Card title="Data readout" href="/showcase/visualizations/data-readout" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/data-readout.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=69ebfe1b64e0272984f294fc16b3ac46" width="864" height="382" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/data-readout.png">
    Sparkline with description containing query data references
  </Card>

  <Card title="Dumbbell plot" href="/showcase/visualizations/dumbbell-plot" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dumbbell-plot.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=c1690ae0e3774d99b2801e0e266391e7" width="1722" height="1448" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/dumbbell-plot.png">
    Compare a pair of data points per category
  </Card>

  <Card title="Gauges" href="/showcase/visualizations/gauge" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/gauge.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=daa58281445138a186d884026730d4b3" width="884" height="524" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/gauge.png">
    Displays a single value in a range
  </Card>

  <Card title="Gradient card & metrics" href="/showcase/visualizations/gradient-card" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/gradient-card.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=6252f56bca075bd84d57a66895b8fff1" width="2012" height="316" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/gradient-card.png">
    Wide card with KPI-style metrics
  </Card>

  <Card title="Honeycomb categorical chart" href="/showcase/visualizations/honeycomb-categorical" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/honeycomb-categorical.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=2079802d187bc8d8a42e18e6c126b81c" width="1740" height="1166" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/honeycomb-categorical.png">
    Hexagonal grid with conditional coloring
  </Card>

  <Card title="Honeycomb map" href="/showcase/visualizations/honeycomb-map" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/honeycomb-map.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=7cad5cf93a1b078713fb94feb9a9f4a6" width="1160" height="794" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/honeycomb-map.png">
    Stylized, hexagonal map with conditional coloring
  </Card>

  <Card title="Image grid" href="/showcase/visualizations/image-grid" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/image-grid.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=f4ba39540e513aaad37c5a60e8acee6a" width="666" height="874" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/image-grid.png">
    Grid of images with a metric and label
  </Card>

  <Card title="Invoice report" href="/showcase/visualizations/invoice-report" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/invoice-report.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=256c831bba661a336f0e686a062c649c" width="1490" height="1206" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/invoice-report.png">
    Structured invoice with contact & order details
  </Card>

  <Card title="Kanban" href="/showcase/visualizations/kanban" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kanban.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=ab959d529dbae980f22c90536a8008bb" width="913" height="572" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kanban.png">
    Kanban-style project board with cards
  </Card>

  <Card title="KPI with conditional colors" href="/showcase/visualizations/kpi-conditional-colors" img="https://mintcdn.com/omni-e7402367/i1NAoykTWGwaiZWJ/showcase/visualizations/images/kpi-conditional-charts.png?fit=max&auto=format&n=i1NAoykTWGwaiZWJ&q=85&s=39d1630e64db63b6f3472df70a3b6812" width="2870" height="746" data-path="showcase/visualizations/images/kpi-conditional-charts.png">
    Dynamically apply colors to KPI values
  </Card>

  <Card title="KPI table" href="/showcase/visualizations/kpi-table" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kpi-table.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=07ad14130d15d0cac071e74c8ba99a49" width="2602" height="744" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kpi-table.png">
    Table displaying multiple KPIs
  </Card>

  <Card title="KPI with sparkline" href="/showcase/visualizations/kpi-with-sparkline" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kpi-with-sparkline.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=ae6f6bd3e901c9010969a09429c1976c" width="700" height="450" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/kpi-with-sparkline.png">
    KPI-style metric with sparkline
  </Card>

  <Card title="Metric tree" href="/showcase/visualizations/metric-tree" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/metric-tree.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=56af3362bc9dbdce0a7de50ce139d764" width="1610" height="1164" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/metric-tree.png">
    Pyramid-shaped tree of interdependent metrics
  </Card>

  <Card title="Pie/donut with custom legend" href="/showcase/visualizations/pie-donut-custom-legend" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/pie-donut-custom-legend.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=862eba05b0a096a564d8fc8f7da60172" width="1300" height="452" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/pie-donut-custom-legend.png">
    Pie/donut with custom legend
  </Card>

  <Card title="Record lookup" href="/showcase/visualizations/record-lookup" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/record-lookup.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=8bfb8daa04370bcc6c664f44286bc474" width="1326" height="540" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/record-lookup.png">
    Card with details from a single record
  </Card>

  <Card title="Repeating pie charts" href="/showcase/visualizations/repeating-pie-chart" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-pie-chart.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=545015c8066f6d8db243a57ae0c18721" width="1736" height="1344" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-pie-chart.png">
    Multiple pie charts, one for each row of results
  </Card>

  <Card title="Repeating square fill charts" href="/showcase/visualizations/repeating-square-fill-chart" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-square-fill-chart.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=c2a53a511dd791f9015a778fe16b9be7" width="1736" height="1344" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-square-fill-chart.png">
    Percentage-filled square charts, one for each row of results
  </Card>

  <Card title="Repeating waffle charts" href="/showcase/visualizations/repeating-waffle-chart" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-waffle-chart.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=92d7b223463b084c5b127b1a8b245341" width="1736" height="1436" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/repeating-waffle-chart.png">
    Percentage-filled waffle charts, one for each row of results
  </Card>

  <Card title="Simple subtotal table" href="/showcase/visualizations/simple-subtotal-table" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/simple-subtotal-table.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=e4c3a14c202f2db70c9d5cdfd3723b2e" width="449" height="380" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/simple-subtotal-table.png">
    Table with subtotals on top and coloring by category
  </Card>

  <Card title="Symmetric funnel" href="/showcase/visualizations/symmetric-funnel" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/symmetric-funnel.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=b092b5abc88fab09bbcf557fe743f30d" width="1348" height="908" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/symmetric-funnel.png">
    Funnel with multiple stages
  </Card>

  <Card title="Table with tiny bar charts" href="/showcase/visualizations/table-with-tiny-bars" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/table-with-tiny-bars.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=ddbe256cc221059652489f3c3476eb67" width="461" height="242" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/table-with-tiny-bars.png">
    Small chart within each table row
  </Card>

  <Card title="Team progress tracker" href="/showcase/visualizations/team-progress-tracker" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/team-progress-tracker.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=88024d92934070163dede27e154816d8" width="1632" height="318" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/team-progress-tracker.png">
    Show team members progress to their goals
  </Card>

  <Card title="Test results cards" href="/showcase/visualizations/test-results-cards" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/test-results-cards.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=88135c112c1894381e700ede050553da" width="1316" height="1658" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/test-results-cards.png">
    Consistent presentation of multiple metrics with varying ranges
  </Card>

  <Card title="Thermometer" href="/showcase/visualizations/thermometer" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/thermometer.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=be5b6150ea9a7c9d5a44de46cd3ea8f2" width="600" height="840" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/thermometer.png">
    Fundraising style progress indicator
  </Card>

  <Card title="Uptime heatmaps" href="/showcase/visualizations/uptime-heatmaps" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/uptime-heatmaps.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=10774aafa9d21b92879d5e87d6fe4e90" width="850" height="1100" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/uptime-heatmaps.png">
    Use color to show reliability of a service over time
  </Card>

  <Card title="Word cloud" href="/showcase/visualizations/word-cloud" img="https://mintcdn.com/omni-e7402367/DQzixK90vW1BRlNB/images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/word-cloud.png?fit=max&auto=format&n=DQzixK90vW1BRlNB&q=85&s=a67c4f4da81ecbea69fde4b82437e96d" width="1062" height="620" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/images/examples/visualizations/word-cloud.png">
    Visualization that highlights frequently-used words
  </Card>
</Columns>
