UI Gallery
Data Visualizaton
Present quantitative data as various graphic forms based on density and complexity of data.
Includes:
A line chart is a type of graph that displays trends or changes in data over a continuous interval by connecting individual data points with lines. Uses
- Show trends, correlations and fluctuations over time.
- Ideal for dense time data where changes between points matter.
- Examples: stock prices, sensor data, temperature readings
An area chart displays quantitative data over a continuous interval using filled areas beneath plotted data points connected with lines. Uses
- Emphasize volume or magnitude of change over time, not just direction.
- Showing cumulative values.
- Examples: Tracking total revenue growth broken down by product line, monitoring energy consumption trends from multiple sources
A bar chart uses rectangular bars to visually represent and compare values across categories. The length or height of each bar corresponds to the value it represents. Uses
- Compare quantities across discrete groupings such as time intervals, sequential stages in a process, or related variables within a set.
- Ideal for categorical data and most effective when there are few data series, allowing for clear comparison between items.
- Examples: Bug reports by severity level, top 10 highest grossing films, sales by region in Q1
A type of chart that has a circular y-axis where values are compared based on proportion of the circular path completed (not the length of the arcs). Uses
- Emphasizing completion and visual appeal over comparison.
- Useful when the space available small.
- Examples: progress towards a goal, completion levels for different learning modules\
A type of chart that displays proportionate parts of a whole as slices of a circle. Each slice represents a category’s contribution to the total, with its angle proportional to the value it represents. Uses
- To show the composition of a finite whole or at a given point in time
- Best used when the data series is categorical and not too dense.
- Examples: market share by brand, survey responses to multiple choice questions, time spent across activities in a day
A chart that plots three or more variables on axes radiating from a central point. Data points are connected to form a polygon for each data series, showing patterns or comparisons across categories Uses
- Comparing multiple metrics across sub-categories
- Emphasize symmetry, imbalance or dominance
- Examples: evaluating candidates across skills, products across features, showing how departments score across metrics like speed, cost, and quality
LineChart, AreaChart, BarChart, PieChart, RadarChart, RadialChart
Line Chart
DefinitionA line chart is a type of graph that displays trends or changes in data over a continuous interval by connecting individual data points with lines. Uses
- Show trends, correlations and fluctuations over time.
- Ideal for dense time data where changes between points matter.
- Examples: stock prices, sensor data, temperature readings
Area Chart
DefinitionAn area chart displays quantitative data over a continuous interval using filled areas beneath plotted data points connected with lines. Uses
- Emphasize volume or magnitude of change over time, not just direction.
- Showing cumulative values.
- Examples: Tracking total revenue growth broken down by product line, monitoring energy consumption trends from multiple sources
Bar Chart
DefinitionA bar chart uses rectangular bars to visually represent and compare values across categories. The length or height of each bar corresponds to the value it represents. Uses
- Compare quantities across discrete groupings such as time intervals, sequential stages in a process, or related variables within a set.
- Ideal for categorical data and most effective when there are few data series, allowing for clear comparison between items.
- Examples: Bug reports by severity level, top 10 highest grossing films, sales by region in Q1
Vertical Bar Chart
Horizontal Bar Chart
Radial Chart
DefinitionA type of chart that has a circular y-axis where values are compared based on proportion of the circular path completed (not the length of the arcs). Uses
- Emphasizing completion and visual appeal over comparison.
- Useful when the space available small.
- Examples: progress towards a goal, completion levels for different learning modules\
Pie Chart
DefinitionA type of chart that displays proportionate parts of a whole as slices of a circle. Each slice represents a category’s contribution to the total, with its angle proportional to the value it represents. Uses
- To show the composition of a finite whole or at a given point in time
- Best used when the data series is categorical and not too dense.
- Examples: market share by brand, survey responses to multiple choice questions, time spent across activities in a day
Radar Chart
DefinitionA chart that plots three or more variables on axes radiating from a central point. Data points are connected to form a polygon for each data series, showing patterns or comparisons across categories Uses
- Comparing multiple metrics across sub-categories
- Emphasize symmetry, imbalance or dominance
- Examples: evaluating candidates across skills, products across features, showing how departments score across metrics like speed, cost, and quality
Anatomy
title: Describes the main insight the chart reveals, supported by a subtitle.tooltip: Expose the value(s) tied to a point, segment, or shape in the chart during interaction.grid: Polar (in Radial and Radar Charts) or categorical grid lines for value reference.legend: Maps colors to data categories they represent. When required, legends may also include value types/units of their respective axes.
Legend Variants
Prompt-Based UI Controls
A simple prompt in plain language given to C1 is enough to control the following properties.- Visibility of Elements
- Tell C1 whether x and y axis labels should be visible in the chart.
- Orientation and Layout (only Bar Charts)
- Ask C1 to use vertical or horizontal bars in Bar Charts.
- Choose whether you want to use a stacked or grouped Bar Chart.
- Data Units
- Prompt whether you want the quantitative data to be shown in thousands (K), millions (M), billions (B), or trillions (T).
- Category Labels
- Rename category labels shown in the chart (eg. “rename Product A to Mobile”).