Chart.js Bar Chart

Bar charts are perfect for comparing values across categories. Chart.js provides interactive, responsive charts with hover effects.

Use Case

Use bar charts when you need to:

• Compare values across categories
• Show performance metrics
• Display experimental results
• Visualize benchmark data

Code

 1```chart
 2{
 3  "type": "bar",
 4  "data": {
 5    "labels": ["Method A", "Method B", "Method C"],
 6    "datasets": [{
 7      "label": "Performance (ms)",
 8      "data": [120, 85, 95],
 9      "backgroundColor": [
10        "rgba(255, 99, 132, 0.5)",
11        "rgba(54, 162, 235, 0.5)",
12        "rgba(255, 206, 86, 0.5)"
13      ]
14    }]
15  },
16  "options": {
17    "scales": {
18      "y": {
19        "beginAtZero": true
20      }
21    }
22  }
23}
24```

Result:

Explanation

• type: Chart type (bar, line, pie, etc.)
• data.labels: X-axis labels
• data.datasets: Data series with styling
• options: Chart configuration (scales, legend, etc.)

Examples

Example 1: Benchmark Comparison

 1```chart
 2{
 3  "type": "bar",
 4  "data": {
 5    "labels": ["Baseline", "Optimized v1", "Optimized v2", "Final"],
 6    "datasets": [{
 7      "label": "Execution Time (ms)",
 8      "data": [450, 320, 280, 195],
 9      "backgroundColor": "rgba(75, 192, 192, 0.6)",
10      "borderColor": "rgba(75, 192, 192, 1)",
11      "borderWidth": 1
12    }]
13  },
14  "options": {
15    "responsive": true,
16    "scales": {
17      "y": {
18        "beginAtZero": true,
19        "title": {
20          "display": true,
21          "text": "Time (milliseconds)"
22        }
23      }
24    },
25    "plugins": {
26      "title": {
27        "display": true,
28        "text": "Performance Optimization Progress"
29      }
30    }
31  }
32}
33```

Result:

Example 2: Multiple Datasets

 1```chart
 2{
 3  "type": "bar",
 4  "data": {
 5    "labels": ["Test 1", "Test 2", "Test 3", "Test 4"],
 6    "datasets": [
 7      {
 8        "label": "Accuracy (%)",
 9        "data": [92, 95, 94, 97],
10        "backgroundColor": "rgba(54, 162, 235, 0.6)"
11      },
12      {
13        "label": "Precision (%)",
14        "data": [89, 93, 91, 96],
15        "backgroundColor": "rgba(255, 99, 132, 0.6)"
16      }
17    ]
18  },
19  "options": {
20    "responsive": true,
21    "scales": {
22      "y": {
23        "beginAtZero": true,
24        "max": 100
25      }
26    }
27  }
28}
29```

Result:

Example 3: Horizontal Bar Chart

 1```chart
 2{
 3  "type": "bar",
 4  "data": {
 5    "labels": ["Python", "Go", "JavaScript", "Rust"],
 6    "datasets": [{
 7      "label": "Lines of Code",
 8      "data": [1200, 800, 1500, 650],
 9      "backgroundColor": [
10        "rgba(255, 159, 64, 0.6)",
11        "rgba(75, 192, 192, 0.6)",
12        "rgba(255, 205, 86, 0.6)",
13        "rgba(201, 203, 207, 0.6)"
14      ]
15    }]
16  },
17  "options": {
18    "indexAxis": "y",
19    "responsive": true
20  }
21}
22```

Result:

Notes

• Charts are interactive - hover to see values
• Use indexAxis: "y" for horizontal bars
• RGBA colors: rgba(red, green, blue, alpha)
• Multiple datasets create grouped bars

Gotchas/Warnings

• ⚠️ JSON format: Must be valid JSON (double quotes, no trailing commas)
• ⚠️ Data length: Labels and data arrays must match in length
• ⚠️ Colors: Provide enough colors for all data points
• ⚠️ Scale: Set appropriate min/max for your data range

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js