Skip to main content

Chart Types & Examples

Chartly supports all Chart.js 4.4 chart types with full customization options. This guide provides complete examples for every chart type with common configurations and styling options.

Quick Reference​

Chart TypeBest ForKey Features
BarComparisons, categoriesVertical/horizontal bars
LineTrends over timePoints, lines, areas
PiePart-to-whole relationshipsCircular segments
DoughnutPart-to-whole with center spaceRing charts
RadarMulti-dimensional dataPolygon overlay
Polar AreaCircular data comparisonRadial segments
ScatterCorrelation analysisX/Y coordinates
BubbleThree-dimensional dataSize-based points

Bar Charts​

Perfect for comparing categories or showing changes over time.

Basic Bar Chart​

curl -X POST "https://api.chartly.dev/v1/chart" \
  -H "Content-Type: application/json" \
  -H "X-Api-Key: YOUR_API_KEY" \
  -d '{
    "chart": {
      "type": "bar",
      "data": {
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "datasets": [{
          "label": "Revenue ($M)",
          "data": [12, 19, 8, 15],
          "backgroundColor": "rgba(54, 162, 235, 0.8)",
          "borderColor": "rgba(54, 162, 235, 1)",
          "borderWidth": 1
        }]
      },
      "options": {
        "responsive": false,
        "plugins": {
          "title": {
            "display": true,
            "text": "Quarterly Revenue"
          }
        },
        "scales": {
          "y": {
            "beginAtZero": true
          }
        }
      }
    },
    "width": 600,
    "height": 400,
    "format": "png"
  }'

Multi-Dataset Bar Chart​

{
  "chart": {
    "type": "bar",
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
      "datasets": [
        {
          "label": "2023",
          "data": [65, 59, 80, 81, 56],
          "backgroundColor": "rgba(255, 99, 132, 0.8)",
          "borderColor": "rgba(255, 99, 132, 1)",
          "borderWidth": 1
        },
        {
          "label": "2024",
          "data": [78, 48, 95, 67, 72],
          "backgroundColor": "rgba(54, 162, 235, 0.8)",
          "borderColor": "rgba(54, 162, 235, 1)",
          "borderWidth": 1
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Year-over-Year Comparison"
        },
        "legend": {
          "position": "top"
        }
      },
      "scales": {
        "y": {
          "beginAtZero": true
        }
      }
    }
  },
  "width": 800,
  "height": 400
}

Horizontal Bar Chart​

{
  "chart": {
    "type": "bar",
    "data": {
      "labels": ["Product A", "Product B", "Product C", "Product D"],
      "datasets": [{
        "label": "Sales",
        "data": [19, 8, 15, 12],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.8)",
          "rgba(54, 162, 235, 0.8)",
          "rgba(255, 205, 86, 0.8)",
          "rgba(75, 192, 192, 0.8)"
        ]
      }]
    },
    "options": {
      "responsive": false,
      "indexAxis": "y",
      "plugins": {
        "title": {
          "display": true,
          "text": "Product Sales"
        }
      },
      "scales": {
        "x": {
          "beginAtZero": true
        }
      }
    }
  },
  "width": 600,
  "height": 400
}

Line Charts​

Ideal for showing trends, changes over time, and continuous data.

Basic Line Chart​

{
  "chart": {
    "type": "line",
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      "datasets": [{
        "label": "Website Traffic",
        "data": [2400, 1398, 9800, 3908, 4800, 3800],
        "borderColor": "rgb(75, 192, 192)",
        "backgroundColor": "rgba(75, 192, 192, 0.2)",
        "tension": 0.1
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Monthly Website Traffic"
        }
      },
      "scales": {
        "y": {
          "beginAtZero": true
        }
      }
    }
  },
  "width": 600,
  "height": 400
}

Multi-Line Chart with Areas​

{
  "chart": {
    "type": "line",
    "data": {
      "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
      "datasets": [
        {
          "label": "Desktop",
          "data": [3200, 3800, 3400, 4200],
          "borderColor": "rgb(255, 99, 132)",
          "backgroundColor": "rgba(255, 99, 132, 0.2)",
          "fill": true
        },
        {
          "label": "Mobile",
          "data": [2800, 3200, 3600, 3800],
          "borderColor": "rgb(54, 162, 235)",
          "backgroundColor": "rgba(54, 162, 235, 0.2)",
          "fill": true
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Traffic by Device Type"
        }
      },
      "elements": {
        "line": {
          "tension": 0.4
        }
      }
    }
  },
  "width": 700,
  "height": 400
}

Stepped Line Chart​

{
  "chart": {
    "type": "line",
    "data": {
      "labels": ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"],
      "datasets": [{
        "label": "Process Steps",
        "data": [20, 20, 40, 40, 60],
        "borderColor": "rgb(255, 205, 86)",
        "backgroundColor": "rgba(255, 205, 86, 0.2)",
        "stepped": true
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Process Flow"
        }
      }
    }
  },
  "width": 600,
  "height": 300
}

Pie Charts​

Perfect for showing proportions and percentages of a whole.

Basic Pie Chart​

{
  "chart": {
    "type": "pie",
    "data": {
      "labels": ["Chrome", "Firefox", "Safari", "Edge", "Other"],
      "datasets": [{
        "data": [45.2, 23.8, 18.1, 8.4, 4.5],
        "backgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56",
          "#4BC0C0",
          "#9966FF"
        ],
        "borderWidth": 2,
        "borderColor": "#fff"
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Browser Market Share (%)"
        },
        "legend": {
          "position": "bottom"
        }
      }
    }
  },
  "width": 500,
  "height": 500
}

Pie Chart with Data Labels​

{
  "chart": {
    "type": "pie",
    "data": {
      "labels": ["Sales", "Marketing", "Development", "Support"],
      "datasets": [{
        "data": [300000, 150000, 450000, 100000],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.8)",
          "rgba(54, 162, 235, 0.8)",
          "rgba(255, 205, 86, 0.8)",
          "rgba(75, 192, 192, 0.8)"
        ]
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Department Budget Allocation"
        },
        "tooltip": {
          "callbacks": {
            "label": "function(context) { return context.label + ': $' + context.parsed.toLocaleString(); }"
          }
        }
      }
    }
  },
  "width": 500,
  "height": 500
}

Doughnut Charts​

Similar to pie charts but with a hollow center, great for displaying additional information.

Basic Doughnut Chart​

{
  "chart": {
    "type": "doughnut",
    "data": {
      "labels": ["Completed", "In Progress", "To Do"],
      "datasets": [{
        "data": [65, 25, 10],
        "backgroundColor": [
          "#4CAF50",
          "#FF9800",
          "#F44336"
        ],
        "borderWidth": 0
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Project Status"
        },
        "legend": {
          "position": "right"
        }
      },
      "cutout": "60%"
    }
  },
  "width": 600,
  "height": 400
}

Multi-Level Doughnut Chart​

{
  "chart": {
    "type": "doughnut",
    "data": {
      "labels": ["Desktop", "Mobile", "Tablet"],
      "datasets": [
        {
          "label": "Traffic",
          "data": [55, 35, 10],
          "backgroundColor": ["#FF6384", "#36A2EB", "#FFCE56"],
          "borderWidth": 2
        },
        {
          "label": "Revenue",
          "data": [70, 25, 5],
          "backgroundColor": ["#FF6384", "#36A2EB", "#FFCE56"],
          "borderWidth": 2
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Traffic vs Revenue by Device"
        }
      }
    }
  },
  "width": 500,
  "height": 500
}

Radar Charts​

Excellent for comparing multiple variables across different categories.

Basic Radar Chart​

{
  "chart": {
    "type": "radar",
    "data": {
      "labels": ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
      "datasets": [
        {
          "label": "Product A",
          "data": [4, 3, 4, 2, 2],
          "backgroundColor": "rgba(255, 99, 132, 0.2)",
          "borderColor": "rgba(255, 99, 132, 1)",
          "pointBackgroundColor": "rgba(255, 99, 132, 1)"
        },
        {
          "label": "Product B",
          "data": [2, 4, 3, 4, 4],
          "backgroundColor": "rgba(54, 162, 235, 0.2)",
          "borderColor": "rgba(54, 162, 235, 1)",
          "pointBackgroundColor": "rgba(54, 162, 235, 1)"
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Product Comparison"
        }
      },
      "scales": {
        "r": {
          "beginAtZero": true,
          "max": 5
        }
      }
    }
  },
  "width": 500,
  "height": 500
}

Polar Area Charts​

Circular charts where the radius represents the data value.

Basic Polar Area Chart​

{
  "chart": {
    "type": "polarArea",
    "data": {
      "labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
      "datasets": [{
        "data": [11, 16, 7, 3, 14],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.8)",
          "rgba(75, 192, 192, 0.8)",
          "rgba(255, 205, 86, 0.8)",
          "rgba(201, 203, 207, 0.8)",
          "rgba(54, 162, 235, 0.8)"
        ]
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Color Preferences"
        }
      }
    }
  },
  "width": 500,
  "height": 500
}

Scatter Charts​

Perfect for showing correlations between two variables.

Basic Scatter Plot​

{
  "chart": {
    "type": "scatter",
    "data": {
      "datasets": [{
        "label": "Sales vs Marketing Spend",
        "data": [
          {"x": 10, "y": 20},
          {"x": 15, "y": 25},
          {"x": 20, "y": 30},
          {"x": 25, "y": 35},
          {"x": 30, "y": 40}
        ],
        "backgroundColor": "rgba(255, 99, 132, 0.8)",
        "borderColor": "rgba(255, 99, 132, 1)"
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Marketing ROI Analysis"
        }
      },
      "scales": {
        "x": {
          "title": {
            "display": true,
            "text": "Marketing Spend ($k)"
          }
        },
        "y": {
          "title": {
            "display": true,
            "text": "Sales Revenue ($k)"
          }
        }
      }
    }
  },
  "width": 600,
  "height": 400
}

Multi-Dataset Scatter Plot​

{
  "chart": {
    "type": "scatter",
    "data": {
      "datasets": [
        {
          "label": "Product A",
          "data": [
            {"x": 10, "y": 20},
            {"x": 15, "y": 25},
            {"x": 20, "y": 30}
          ],
          "backgroundColor": "rgba(255, 99, 132, 0.8)"
        },
        {
          "label": "Product B",
          "data": [
            {"x": 12, "y": 18},
            {"x": 18, "y": 22},
            {"x": 22, "y": 28}
          ],
          "backgroundColor": "rgba(54, 162, 235, 0.8)"
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Product Performance Comparison"
        }
      }
    }
  },
  "width": 600,
  "height": 400
}

Bubble Charts​

Three-dimensional data visualization using x, y coordinates and bubble size.

Basic Bubble Chart​

{
  "chart": {
    "type": "bubble",
    "data": {
      "datasets": [{
        "label": "Companies",
        "data": [
          {"x": 20, "y": 30, "r": 15},
          {"x": 40, "y": 10, "r": 10},
          {"x": 30, "y": 40, "r": 20},
          {"x": 50, "y": 20, "r": 12}
        ],
        "backgroundColor": "rgba(255, 99, 132, 0.6)",
        "borderColor": "rgba(255, 99, 132, 1)"
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Market Positioning"
        }
      },
      "scales": {
        "x": {
          "title": {
            "display": true,
            "text": "Innovation Index"
          }
        },
        "y": {
          "title": {
            "display": true,
            "text": "Market Share (%)"
          }
        }
      }
    }
  },
  "width": 600,
  "height": 400
}

Mixed Chart Types​

Combine different chart types for complex visualizations.

Line + Bar Combination​

{
  "chart": {
    "type": "bar",
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
      "datasets": [
        {
          "type": "bar",
          "label": "Revenue",
          "data": [50, 45, 60, 55, 70],
          "backgroundColor": "rgba(54, 162, 235, 0.8)",
          "yAxisID": "y"
        },
        {
          "type": "line",
          "label": "Profit Margin (%)",
          "data": [15, 18, 12, 20, 16],
          "borderColor": "rgba(255, 99, 132, 1)",
          "backgroundColor": "rgba(255, 99, 132, 0.2)",
          "yAxisID": "y1"
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Revenue vs Profit Margin"
        }
      },
      "scales": {
        "y": {
          "type": "linear",
          "display": true,
          "position": "left"
        },
        "y1": {
          "type": "linear",
          "display": true,
          "position": "right",
          "grid": {
            "drawOnChartArea": false
          }
        }
      }
    }
  },
  "width": 700,
  "height": 400
}

Advanced Styling & Options​

Custom Colors and Gradients​

{
  "chart": {
    "type": "bar",
    "data": {
      "labels": ["Product A", "Product B", "Product C"],
      "datasets": [{
        "data": [30, 45, 25],
        "backgroundColor": [
          "linear-gradient(to bottom, #667eea 0%, #764ba2 100%)",
          "linear-gradient(to bottom, #f093fb 0%, #f5576c 100%)",
          "linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%)"
        ],
        "borderRadius": 8,
        "borderSkipped": false
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "legend": {
          "display": false
        },
        "title": {
          "display": true,
          "text": "Modern Styled Chart",
          "font": {
            "size": 16,
            "weight": "bold"
          }
        }
      }
    }
  },
  "width": 500,
  "height": 400
}

Dark Theme Example​

{
  "chart": {
    "type": "line",
    "data": {
      "labels": ["Mon", "Tue", "Wed", "Thu", "Fri"],
      "datasets": [{
        "label": "Daily Active Users",
        "data": [1200, 1400, 1100, 1600, 1800],
        "borderColor": "#64ffda",
        "backgroundColor": "rgba(100, 255, 218, 0.1)",
        "fill": true,
        "tension": 0.4
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Daily Active Users",
          "color": "#ffffff",
          "font": {
            "size": 16
          }
        },
        "legend": {
          "labels": {
            "color": "#ffffff"
          }
        }
      },
      "scales": {
        "x": {
          "ticks": {
            "color": "#ffffff"
          },
          "grid": {
            "color": "rgba(255, 255, 255, 0.1)"
          }
        },
        "y": {
          "ticks": {
            "color": "#ffffff"
          },
          "grid": {
            "color": "rgba(255, 255, 255, 0.1)"
          }
        }
      }
    }
  },
  "width": 600,
  "height": 400,
  "backgroundColor": "#1a1a1a"
}

Best Practices​

Chart Configuration Tips​

  1. Always set responsive: false for image generation
  2. Specify exact dimensions in your request
  3. Use appropriate colors that work in your target medium
  4. Include meaningful titles and labels
  5. Test different formats (PNG vs SVG) for your use case

Performance Optimization​

{
  "chart": {
    "type": "line",
    "data": { /* your data */ },
    "options": {
      "responsive": false,
      "animation": false,
      "elements": {
        "point": {
          "radius": 0
        }
      },
      "plugins": {
        "legend": {
          "display": false
        }
      }
    }
  }
}

Accessibility Considerations​

{
  "chart": {
    "type": "bar",
    "data": { /* your data */ },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Descriptive Chart Title"
        },
        "tooltip": {
          "enabled": true
        }
      }
    }
  }
}

Common Chart Patterns​

Dashboard Metrics​

{
  "chart": {
    "type": "doughnut",
    "data": {
      "labels": ["Complete", "Remaining"],
      "datasets": [{
        "data": [75, 25],
        "backgroundColor": ["#4CAF50", "#E0E0E0"],
        "borderWidth": 0
      }]
    },
    "options": {
      "responsive": false,
      "cutout": "80%",
      "plugins": {
        "legend": {
          "display": false
        }
      }
    }
  },
  "width": 200,
  "height": 200
}

Financial Charts​

{
  "chart": {
    "type": "line",
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      "datasets": [{
        "label": "Stock Price ($)",
        "data": [100, 105, 98, 110, 115, 108],
        "borderColor": "#2196F3",
        "backgroundColor": "transparent",
        "pointBackgroundColor": "#2196F3",
        "pointBorderColor": "#ffffff",
        "pointBorderWidth": 2,
        "tension": 0
      }]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "title": {
          "display": true,
          "text": "Stock Performance"
        }
      },
      "scales": {
        "y": {
          "beginAtZero": false
        }
      }
    }
  },
  "width": 600,
  "height": 300
}

Next Steps: