📈 Charts with Chart.js

This guide explains how to create charts using the Chart.js integration in IVYSTUDY markdown files.

Basic Syntax

Charts are created using a special code block with the chart identifier:

```chart
{
    "type": "bar",
    "data": {
        "labels": ["Label 1", "Label 2"],
        "datasets": [{
            "label": "Dataset Name",
            "data": [10, 20]
        }]
    }
}
```

Chart Types

Bar Chart

```chart
{
    "type": "bar",
    "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr"],
        "datasets": [{
            "label": "Sales",
            "data": [65, 59, 80, 81],
            "backgroundColor": [
                "rgba(76, 175, 80, 0.5)",
                "rgba(33, 150, 243, 0.5)",
                "rgba(255, 152, 0, 0.5)",
                "rgba(233, 30, 99, 0.5)"
            ]
        }]
    },
    "options": {
        "scales": {
            "y": {
                "beginAtZero": true
            }
        }
    }
}
```

Line Chart

```chart
{
    "type": "line",
    "data": {
        "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
        "datasets": [{
            "label": "Progress",
            "data": [10, 25, 45, 70],
            "borderColor": "rgb(76, 175, 80)",
            "tension": 0.1
        }]
    }
}
```

Pie Chart

```chart
{
    "type": "pie",
    "data": {
        "labels": ["Red", "Blue", "Yellow"],
        "datasets": [{
            "data": [300, 50, 100],
            "backgroundColor": [
                "rgb(255, 99, 132)",
                "rgb(54, 162, 235)",
                "rgb(255, 205, 86)"
            ]
        }]
    }
}
```

Doughnut Chart

```chart
{
    "type": "doughnut",
    "data": {
        "labels": ["A", "B", "C", "D"],
        "datasets": [{
            "data": [30, 20, 25, 25],
            "backgroundColor": [
                "rgb(76, 175, 80)",
                "rgb(33, 150, 243)",
                "rgb(255, 152, 0)",
                "rgb(233, 30, 99)"
            ]
        }]
    }
}
```

Advanced Features

Multiple Datasets

```chart
{
    "type": "line",
    "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr"],
        "datasets": [
            {
                "label": "Dataset 1",
                "data": [65, 59, 80, 81],
                "borderColor": "rgb(76, 175, 80)"
            },
            {
                "label": "Dataset 2",
                "data": [28, 48, 40, 19],
                "borderColor": "rgb(33, 150, 243)"
            }
        ]
    }
}
```

Custom Styling

```chart
{
    "type": "bar",
    "data": {
        "labels": ["A", "B", "C"],
        "datasets": [{
            "label": "Custom Style",
            "data": [10, 20, 30],
            "backgroundColor": "rgba(76, 175, 80, 0.5)",
            "borderColor": "rgb(76, 175, 80)",
            "borderWidth": 2,
            "borderRadius": 5,
            "hoverBackgroundColor": "rgba(76, 175, 80, 0.7)"
        }]
    },
    "options": {
        "plugins": {
            "title": {
                "display": true,
                "text": "Custom Chart Title"
            }
        }
    }
}
```

Configuration Options

Common Options

"options": {
    "responsive": true,
    "maintainAspectRatio": true,
    "scales": {
        "y": {
            "beginAtZero": true,
            "title": {
                "display": true,
                "text": "Value"
            }
        },
        "x": {
            "title": {
                "display": true,
                "text": "Category"
            }
        }
    },
    "plugins": {
        "title": {
            "display": true,
            "text": "Chart Title"
        },
        "legend": {
            "position": "top",
            "display": true
        },
        "tooltip": {
            "enabled": true
        }
    }
}

Data Labels Plugin

The charts automatically include the ChartDataLabels plugin. To customize data labels:

```chart
{
    "type": "bar",
    "data": {
        "labels": ["A", "B", "C"],
        "datasets": [{
            "data": [10, 20, 30]
        }]
    },
    "options": {
        "plugins": {
            "datalabels": {
                "color": "#666",
                "anchor": "end",
                "align": "top",
                "offset": 4,
                "font": {
                    "weight": "bold"
                }
            }
        }
    }
}
```

Best Practices

1. Colors: Use consistent colors for better visual hierarchy
2. Labels: Keep labels short and clear
3. Data: Avoid overcrowding charts with too much data
4. Responsiveness: Charts are automatically responsive
5. Dark Mode: Charts automatically adapt to dark mode

Examples for Common Uses

Academic Progress Tracker

```chart
{
    "type": "line",
    "data": {
        "labels": ["Test 1", "Test 2", "Test 3", "Final"],
        "datasets": [{
            "label": "Class Average",
            "data": [75, 78, 82, 85],
            "borderColor": "rgb(76, 175, 80)",
            "fill": false
        }]
    },
    "options": {
        "scales": {
            "y": {
                "min": 0,
                "max": 100
            }
        }
    }
}
```

Distribution of Grades

```chart
{
    "type": "pie",
    "data": {
        "labels": ["A", "B", "C", "D", "F"],
        "datasets": [{
            "data": [30, 25, 20, 15, 10],
            "backgroundColor": [
                "rgb(76, 175, 80)",
                "rgb(33, 150, 243)",
                "rgb(255, 152, 0)",
                "rgb(233, 30, 99)",
                "rgb(158, 158, 158)"
            ]
        }]
    }
}
```

---