> ## Documentation Index > Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt > Use this file to discover all available pages before exploring further. # Data Visualizaton > Present quantitative data as various graphic forms based on density and complexity of data. **Includes:** `LineChart`, `AreaChart`, `BarChart`, `PieChart`, `RadarChart`, `RadialChart` ## Line Chart **Definition** \ 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 Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Area Chart **Definition**\ 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 Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Bar Chart **Definition**\ 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 ### Vertical Bar Chart Light Mode Image Dark Mode Image ### Horizontal Bar Chart Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Radial Chart **Definition**\ 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\\ Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Pie Chart **Definition**\ 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 Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Radar Chart **Definition**\ 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 Light Mode Image Dark Mode Image **Illustrative Variants** Light Mode Image Dark Mode Image *** ## Anatomy Light Mode Image Dark Mode Image 1. `title`**:** Describes the main insight the chart reveals, supported by a subtitle. 2. `tooltip`**:** Expose the value(s) tied to a point, segment, or shape in the chart during interaction. 3. `grid` **:** Polar (in Radial and Radar Charts) or categorical grid lines for value reference. 4. `legend`**:** Maps colors to data categories they represent. When required, legends may also include value types/units of their respective axes. ### Legend Variants Light Mode Image Dark Mode Image *** ## 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").