In my django project I'm trying to add zoom functionality to my line plot using the chartjs-plugin-zoom plugin. All other options I modify apart from 'plugins' are conveyed on the chart.
I want the plugin section of my 'options' part below to end up being functional in my chart, as currently it isn't. I'm getting no errors in my console.
I'm using the django-chartjs to manage my charts in django.
My django template html head
<head>
<!-- Include jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="{% static 'assets/js/plugins/chart.js' %}"></script>
<script src="{% static 'assets/js/plugins/hammer.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/chartjs-plugin-zoom.js' %}"></script>
</head>
The section of html to create the plot
<div class="col-md-8">
<div class="card my-card" style="max-height: 530px">
<div class="card-header">
<div class="row justify-content-between">
<div class="col-4">
<h4 class="card-title">Hourly Timeseries</h4>
</div>
</div>
</div>
<canvas id="myChartline"></canvas>
</div>
</div>
The script to create the plot
<script type="text/javascript">
ChartOptionsConfiguration = {
maintainAspectRatio: true,
legend: {
display: true,
position: 'right',
textAlign: 'right',
},
elements: {
point: {
radius: 0,
},
line: {
borderWidth: 1,
},
},
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true,
},
}
},
legend: {
labels: {
usePointStyle: true,
},
}
},
tooltips: {
backgroundColor: '#fff',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
<!-- suggestedMin:50,-->
<!-- suggestedMax: 80,-->
padding: 20,
fontColor: "#9a9a9a"
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(220,53,69,0.1)',
zeroLineColor: "transparent",
},
ticks: {
min: 'Jan 01 - 12:00',
max: 'Jan 07 - 12:00',
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
};
$(document).ready(function() {
$.get('{% url "update_chart" %}', function(data) {
var ctx = $("#myChartline").get(0).getContext("2d");
new Chart(ctx, {
type: 'line',
data: data,
options: ChartOptionsConfiguration,
});
});
});
</script>
Things I've tried:
- Trying different versions of chartjs, chartjs-plugin-zoom and hammer.js cdns