MongoDB Atlas Charts

📊 What is Atlas Charts?

Atlas Charts is a data visualization tool built into MongoDB Atlas. Create beautiful, interactive charts and dashboards directly from your MongoDB data without complex setup or additional tools.


// Sample data for visualization
{
  "_id": 1,
  "product": "Laptop",
  "sales": 1250,
  "region": "North America",
  "date": "2024-01-15"
}

Visualization:

📈 Bar Chart: Sales by Region

North America: ████████ 1250

Chart Types

📊

Bar Charts

Compare values across categories

{
  "type": "bar",
  "x": "category",
  "y": "sales"
}

📈

Line Charts

Show trends over time

{
  "type": "line",
  "x": "date",
  "y": "revenue"
}

🥧

Pie Charts

Display proportions and percentages

{
  "type": "pie",
  "label": "product",
  "value": "quantity"
}

🗺️

Geospatial

Map data by location

{
  "type": "geospatial",
  "location": "coordinates",
  "value": "count"
}

🔹 Creating Your First Chart

Charts connect directly to your MongoDB collections. Use the visual builder to select fields, apply filters, and customize appearance without writing code. Perfect for quick data exploration and analysis.

Steps to create a chart:

Open Atlas Charts from your cluster
Click "Add Chart" and select your data source
Choose a chart type (bar, line, pie, etc.)
Drag fields to X and Y axes
Customize colors, labels, and filters
Save and add to a dashboard

// Sample collection: sales
[
  { product: "Laptop", quantity: 45, revenue: 67500, date: "2024-01" },
  { product: "Phone", quantity: 120, revenue: 96000, date: "2024-01" },
  { product: "Tablet", quantity: 80, revenue: 40000, date: "2024-01" }
]

// Chart Configuration (visual builder generates this)
{
  "chartType": "bar",
  "encoding": {
    "x": { "field": "product", "type": "nominal" },
    "y": { "field": "revenue", "type": "quantitative" }
  },
  "title": "Revenue by Product"
}

🔹 Using Aggregation Pipelines

Charts support MongoDB aggregation pipelines for advanced data transformation. Group, filter, calculate, and reshape data before visualization to create powerful analytics dashboards.

// Aggregation pipeline for chart
[
  // Filter data
  {
    $match: {
      date: { $gte: new Date("2024-01-01") }
    }
  },
  // Group by category
  {
    $group: {
      _id: "$category",
      totalSales: { $sum: "$sales" },
      avgPrice: { $avg: "$price" },
      count: { $sum: 1 }
    }
  },
  // Sort by total sales
  {
    $sort: { totalSales: -1 }
  },
  // Limit to top 10
  {
    $limit: 10
  }
]

// Result visualized in chart
[
  { _id: "Electronics", totalSales: 125000, avgPrice: 450, count: 278 },
  { _id: "Clothing", totalSales: 89000, avgPrice: 65, count: 1369 },
  { _id: "Books", totalSales: 45000, avgPrice: 25, count: 1800 }
]

Chart Output:

Electronics: ████████████ $125,000

Clothing: ████████ $89,000

Books: ████ $45,000

🔹 Embedding Charts

Embed charts in your applications using the Charts Embedding SDK. Display live data visualizations in web apps, dashboards, or reports with automatic updates and interactive features.

<!-- Include Charts SDK -->
<script src="https://charts.mongodb.com/charts-embed-sdk.js"></script>

<!-- Chart container -->
<div id="chart"></div>

<script>
  // Initialize chart
  const sdk = new ChartsEmbedSDK({
    baseUrl: "https://charts.mongodb.com/charts-project-xxxxx"
  });

  // Render chart
  const chart = sdk.createChart({
    chartId: "chart-id-here",
    height: "400px",
    width: "600px",
    theme: "dark"
  });

  // Render in container
  chart.render(document.getElementById("chart"));

  // Apply filters dynamically
  chart.setFilter({ region: "North America" });
</script>

🔹 Creating Dashboards

Combine multiple charts into interactive dashboards. Dashboards provide a comprehensive view of your data with filters, drill-downs, and real-time updates for effective data monitoring.

// Dashboard configuration
{
  "name": "Sales Dashboard",
  "charts": [
    {
      "id": "revenue-by-region",
      "type": "bar",
      "position": { "x": 0, "y": 0, "w": 6, "h": 4 }
    },
    {
      "id": "sales-trend",
      "type": "line",
      "position": { "x": 6, "y": 0, "w": 6, "h": 4 }
    },
    {
      "id": "product-distribution",
      "type": "pie",
      "position": { "x": 0, "y": 4, "w": 4, "h": 4 }
    },
    {
      "id": "top-customers",
      "type": "table",
      "position": { "x": 4, "y": 4, "w": 8, "h": 4 }
    }
  ],
  "filters": [
    { "field": "date", "type": "date-range" },
    { "field": "region", "type": "dropdown" }
  ]
}

🔹 Chart Customization

Customize chart appearance and behavior:

Colors: Choose color schemes or custom palettes
Labels: Add titles, axis labels, and legends
Filters: Add interactive filters for users
Tooltips: Show detailed information on hover
Themes: Light or dark mode support
Refresh: Set auto-refresh intervals for live data

🔹 Best Practices

Follow these guidelines for effective charts:

Choose the right chart: Match chart type to your data
Use aggregations: Pre-process data for better performance
Add filters: Let users explore data interactively
Optimize queries: Use indexes for large datasets
Keep it simple: Don't overcrowd charts with too much data