chartjs-graphs_skill

Overview

This skill provides Chart.js integration patterns for rendering interactive statistical graphs inside Django templates. It shows how to pass JSON data from Django context into canvas data-* attributes, include the datalabels plugin, and render line, bar, horizontal bar, and pie charts with responsive options and validation.

How this skill works

Place canvas elements in your Django templates and attach JSON payloads via data-* attributes using the |safe filter. Include Chart.js and chartjs-plugin-datalabels via CDN in the template head. Use small, focused JavaScript modules that run on DOMContentLoaded to parse data, validate structure, register the datalabels plugin, and create charts with sensible defaults and responsive options.

When to use it

• Dashboard pages that summarize survey submissions, complaints, or responses over time.
• Question-based result pages where multiple charts are rendered in a loop.
• Reporting interfaces that need labeled values on bars or pie segments.
• Prototypes where quick CDN setup is acceptable and server-side JSON injection is preferred.
• When you want consistent chart color palettes and reusable chart patterns across templates.

Best practices

• Wrap chart creation code in a DOMContentLoaded listener and verify the canvas element exists.
• Send pre-serialized JSON from the view and use the |safe filter to inject it into data-* attributes.
• Validate parsed JSON before rendering and handle parsing errors with try-catch.
• Register ChartDataLabels when using datalabels and add the plugin to individual charts if required.
• Use responsive: true, maintainAspectRatio: true, beginAtZero for numeric axes, and stepSize: 1 for integer counts.
• Keep one JavaScript file per chart type and reuse a shared color palette for consistency.

Example use cases

• Line chart showing daily survey submissions with dates on the x-axis and counts on the y-axis.
• Horizontal bar chart ranking complaint reasons with numeric labels displayed via datalabels.
• Pie chart summarizing response distribution with percentage labels calculated in the formatter.
• Loop-generated canvases for each questionnaire question using unique ids and per-item summary data.
• Admin dashboard combining time series, vertical bars, and pie charts using the same color palette.