Introduction
ApexCharts is a JavaScript charting library that can render interactive line charts from a configuration object containing the chart type, series, and optional x-axis categories. The official installation guide supports loading ApexCharts directly from jsDelivr with a script tag, making it a practical choice for a Django template without introducing a JavaScript build pipeline.
Step 1: Create a Django Project
Start with a standard Django project and an application that will contain the view and template.
python -m venv .venv
# Windows
.venv\Scripts\activate
# macOS/Linux
# source .venv/bin/activate
pip install django
django-admin startproject chartproject .
python manage.py startapp dashboard
python manage.py migrate
Add the application to INSTALLED_APPS in chartproject/settings.py.
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"dashboard",
]Step 2: Create the Django View
Django views can render a template with a context dictionary. We will use that context to send the chart labels and values from Python to the browser.
from django.shortcuts import render
def sales_chart(request):
months = [
"January",
"February",
"March",
"April",
"May",
"June",
]
sales = [12500, 14800, 13200, 17100, 18900, 21500]
context = {
"months": months,
"sales": sales,
}
return render(request, "dashboard/sales_chart.html", context)Step 3: Add the View URL
Create a URL pattern that points to the chart view so the browser can request the page.
from django.urls import path
from .views import sales_chart
urlpatterns = [
path("sales-chart/", sales_chart, name="sales_chart"),
]Include the application URLs from the project's main URL configuration.
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("dashboard.urls")),
]Step 4: Create the Django Template
Create the template directory and an HTML file. The chart itself will be rendered inside a dedicated div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sales Chart</title>
</head>
<body>
<div id="sales-chart"></div>
</body>
</html>ApexCharts renders into a DOM element supplied to its constructor, so the container ID must match the element selected by the JavaScript code.
Step 5: Add Bootstrap 5 for the Page Layout
Bootstrap is not required by ApexCharts, but it provides a convenient responsive layout and card component for the chart.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sales Chart</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
>
</head>
<body class="bg-light">
<main class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h3 mb-4">Monthly Sales</h1>
<div id="sales-chart"></div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>Step 6: Include ApexCharts from jsDelivr
The official ApexCharts installation documentation shows that the library can be included directly with a jsDelivr script tag. When loaded this way, ApexCharts is available through window.ApexCharts.
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>Place the script near the end of the page, after the chart container, so the browser has already created the target element before the chart code runs.
Step 7: Pass Django Data Safely to JavaScript
Django template variables can be inserted into JavaScript, but lists should be serialized as JSON rather than converted into JavaScript manually. Django's json_script filter provides a safe way to expose JSON data through a script element, which JavaScript can then read with JSON.parse().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sales Chart</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
>
</head>
<body class="bg-light">
<main class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h3 mb-4">Monthly Sales</h1>
<div id="sales-chart"></div>
{{ months|json_script:"months-data" }}
{{ sales|json_script:"sales-data" }}
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const months = JSON.parse(
document.getElementById("months-data").textContent
);
const sales = JSON.parse(
document.getElementById("sales-data").textContent
);
</script>
</body>
</html>Step 8: Configure the ApexCharts Line Chart
ApexCharts uses the chart.type option to select the chart type. For a line chart, use line. Axis charts use a series array containing objects with a series name and data values. When using simple numeric data, labels can be supplied through xaxis.categories.
const options = {
chart: {
type: "line",
height: 400
},
series: [
{
name: "Sales",
data: sales
}
],
xaxis: {
categories: months
},
stroke: {
curve: "smooth",
width: 3
},
markers: {
size: 5
}
};
The series value contains the numerical points, while xaxis.categories supplies the matching labels. This category-based approach is suitable for monthly values such as the example above.
Step 9: Render the Chart
Create an ApexCharts instance by passing the target DOM element and options object, then call render(). The ApexCharts documentation identifies render() as the method that draws the configured chart.
const chartElement = document.querySelector("#sales-chart");
const chart = new ApexCharts(chartElement, options);
chart.render();Step 10: Combine Everything into the Final Template
The final version combines Bootstrap, the Django-generated JSON data, the ApexCharts library, the chart configuration, and the rendering call into one template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monthly Sales Chart</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
>
</head>
<body class="bg-light">
<main class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-lg-10">
<div class="card shadow-sm border-0">
<div class="card-header bg-white border-0 pt-4 px-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="badge bg-primary mb-2">ApexCharts</span>
<h1 class="h3 mb-1">Monthly Sales</h1>
<p class="text-muted mb-0">Sales performance by month</p>
</div>
</div>
</div>
<div class="card-body px-4 pb-4">
<div id="sales-chart"></div>
</div>
</div>
</div>
</div>
</main>
{{ months|json_script:"months-data" }}
{{ sales|json_script:"sales-data" }}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const months = JSON.parse(
document.getElementById("months-data").textContent
);
const sales = JSON.parse(
document.getElementById("sales-data").textContent
);
const options = {
chart: {
type: "line",
height: 420,
toolbar: {
show: true
}
},
series: [
{
name: "Sales",
data: sales
}
],
xaxis: {
categories: months,
title: {
text: "Month"
}
},
yaxis: {
title: {
text: "Sales"
},
labels: {
formatter: function (value) {
return "$" + value.toLocaleString();
}
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth",
width: 3
},
markers: {
size: 5,
hover: {
size: 7
}
},
tooltip: {
y: {
formatter: function (value) {
return "$" + value.toLocaleString();
}
}
},
grid: {
strokeDashArray: 4
}
};
const chartElement = document.querySelector("#sales-chart");
if (chartElement) {
const chart = new ApexCharts(chartElement, options);
chart.render();
}
</script>
</body>
</html>
With the view and URL configuration from the previous steps, start Django and open /sales-chart/. The browser will receive the values generated by the Django view, ApexCharts will interpret them as a line-series configuration, and the chart will render inside the Bootstrap card.
Complete Django View
For reference, the view can remain simple because the presentation logic is handled by the template.
from django.shortcuts import render
def sales_chart(request):
months = [
"January",
"February",
"March",
"April",
"May",
"June",
]
sales = [12500, 14800, 13200, 17100, 18900, 21500]
return render(
request,
"dashboard/sales_chart.html",
{
"months": months,
"sales": sales,
},
)How the Data Flow Works
The integration has a straightforward server-to-browser flow. The Django view prepares the values, the template serializes them as JSON, JavaScript reads the JSON values, and ApexCharts uses those values as the series and x-axis categories.
Django View
Prepares monthly labels and sales values.
Template
Serializes the Python lists as JSON.
JavaScript
Reads the JSON and builds the chart options.
ApexCharts
Renders the interactive SVG chart in the container.
Common Problems and Fixes
id="sales-chart" exists and that the ApexCharts script is loaded before new ApexCharts(...) is executed.
window.ApexCharts.
months and sales arrays have matching lengths and ordering. Each category should correspond to the value at the same position in the series data.
Conclusion
Integrating ApexCharts into a Django view template does not require a separate charting backend. The Django view prepares the data, the template transfers that data to JavaScript, and ApexCharts handles the visualization. For a standard category-based line chart, the essential configuration is a line chart type, a series array, and matching x-axis categories.
The same structure can be extended to multiple series, datetime-based data, tooltips, zooming, annotations, and other ApexCharts options as the application's reporting requirements grow.
Reference
ApexCharts installation and usage documentation: ApexCharts Installation
Comments