Example shows Python Multi Series Area Chart with Legends & semi-transparent filled area. Opacity is useful when your data includes overlapping region. Demo also includes Django source-code that you can try running locally.
<!-- index.html -->
{% load static %}
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Email Analysis"
},
axisY: {
title: "Number of Emails"
},
legend: {
verticalAlign: "top",
horizontalAlign: "right",
dockInsidePlotArea: true
},
data: [{
type: "area",
name: "Received",
showInLegend: true,
legendMarkerType: "square",
fillOpacity: 0.5,
markerSize: 0,
xValueType: "dateTime",
dataPoints: {{ recieved_emails_data|safe }}
}, {
type: "area",
name: "Sent",
showInLegend: true,
legendMarkerType: "square",
fillOpacity: 0.5,
markerSize: 0,
xValueType: "dateTime",
dataPoints: {{ sent_emails_data|safe }}
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
<script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>
from django.shortcuts import render
def index(request):
recieved_emails_data = [
{ "x": 1577817000000, "y": 7, 'label': "Midnight" },
{ "x": 1577820600000, "y": 8 },
{ "x": 1577824200000, "y": 5 },
{ "x": 1577827800000, "y": 7 },
{ "x": 1577831400000, "y": 6 },
{ "x": 1577835000000, "y": 8 },
{ "x": 1577838600000, "y": 12 },
{ "x": 1577842200000, "y": 24 },
{ "x": 1577845800000, "y": 36 },
{ "x": 1577849400000, "y": 35 },
{ "x": 1577853000000, "y": 37 },
{ "x": 1577856600000, "y": 29 },
{ "x": 1577860200000, "y": 34, 'label': "Noon" },
{ "x": 1577863800000, "y": 38 },
{ "x": 1577867400000, "y": 23 },
{ "x": 1577871000000, "y": 31 },
{ "x": 1577874600000, "y": 34 },
{ "x": 1577878200000, "y": 29 },
{ "x": 1577881800000, "y": 14 },
{ "x": 1577885400000, "y": 12 },
{ "x": 1577889000000, "y": 10 },
{ "x": 1577892600000, "y": 8 },
{ "x": 1577896200000, "y": 13 },
{ "x": 1577899800000, "y": 11 }
]
sent_emails_data = [
{ "x": 1577817000000, "y": 12, 'label': "Midnight" },
{ "x": 1577820600000, "y": 10 },
{ "x": 1577824200000, "y": 3 },
{ "x": 1577827800000, "y": 5 },
{ "x": 1577831400000, "y": 2 },
{ "x": 1577835000000, "y": 1 },
{ "x": 1577838600000, "y": 3 },
{ "x": 1577842200000, "y": 6 },
{ "x": 1577845800000, "y": 13 },
{ "x": 1577849400000, "y": 14 },
{ "x": 1577853000000, "y": 15 },
{ "x": 1577856600000, "y": 21 },
{ "x": 1577860200000, "y": 24 },
{ "x": 1577863800000, "y": 28, 'label': "Noon" },
{ "x": 1577867400000, "y": 26 },
{ "x": 1577871000000, "y": 16 },
{ "x": 1577874600000, "y": 23 },
{ "x": 1577878200000, "y": 28 },
{ "x": 1577881800000, "y": 22 },
{ "x": 1577885400000, "y": 10 },
{ "x": 1577889000000, "y": 9 },
{ "x": 1577892600000, "y": 6 },
{ "x": 1577896200000, "y": 4 },
{ "x": 1577899800000, "y": 12 }
]
return render(request, 'index.html', { "recieved_emails_data" : recieved_emails_data, "sent_emails_data" : sent_emails_data })
Color of filled region & it's opacity can be changed using color & fillOpacity properties. Other frequently used customization options in Python Area Chart includes lineColor, lineDashType, lineThickness etc.