← Back

Chart Tests - Interactive Visualization Examples

This post serves as a test bed for all the chart types available in the blog system. Each chart type is demonstrated with example data to verify proper rendering and functionality.

Line Chart Example

This line chart shows a simple trend over time, demonstrating how data flows and changes across different points.

Multiple Line Chart

Here’s an example with multiple lines showing different trends that can be compared side by side.

Vertical Bar Chart

A standard vertical bar chart comparing values across different categories.

Horizontal Bar Chart

The same data displayed horizontally, which can be useful for longer category names.

Stacked Bar Chart

Multiple series stacked on top of each other to show composition and total.

Grouped Bar Chart

Multiple series displayed side by side for easy comparison.

Pie Chart

A simple pie chart showing proportions of a whole.

Scatter Plot

A scatter plot demonstrating the relationship between two variables.

Multiple Scatter Series

Comparing multiple datasets in a scatter plot.

Complex Line Chart with More Data Points

A more complex line chart with many data points to test performance and rendering.

Bar Chart with Border Radius

Testing rounded corners on bars for a modern look.

Bar Chart with Custom Gaps

Testing barGapRatio and categoryGapRatio for controlling spacing between bars.

Wide Bar Chart

Testing with a larger maxBarSize for emphasis.

Horizontal Bar with Long Labels

Testing horizontal layout with longer category names and custom width.

Multiple Stacked Series

Testing stacked bars with multiple series and colors.

Horizontal Stacked Bar Chart

Combining horizontal layout with stacking.

Bar Chart with Angled Labels

Testing rotated x-axis labels for better readability with many categories.

Testing Notes

This page includes examples of:

  • Line charts (single and multiple series)
  • Bar charts (vertical, horizontal, stacked, and grouped)
    • With border radius
    • With custom gaps (barGapRatio, categoryGapRatio)
    • With custom max bar size
    • With angled x-axis labels
    • With long y-axis labels and custom width
    • Horizontal stacked variants
  • Pie charts (with multiple categories)
  • Scatter plots (single and multiple series)

All charts should be:

  • Interactive with hover tooltips
  • Responsive across different screen sizes
  • Properly styled with the site theme
  • Displaying data source attributions

Bar Chart Options Tested

Based on MUI X Charts Bar documentation:

  • borderRadius - Rounded corners on bars
  • barGapRatio - Gap between bars in the same category
  • categoryGapRatio - Gap between categories
  • maxBarSize - Maximum width of bars
  • layout - Vertical or horizontal orientation
  • yAxisWidth - Custom width for y-axis (useful for long labels)
  • xAxisAngle - Rotate x-axis labels
  • stack - Stack bars with the same stack ID

Use this page to verify that all chart types render correctly and to experiment with new chart configurations and styling options.