Make the chart display current year in HighChart

Question

Chart appears like so:

I want it to display current year in x-axis where the months are. Had a look at different solutions but none of them help.

Please, see where i went wrong since i'm still new to this.

Appreciate your help a lot!

Django version: 1.10
Python version: 3.6

---

chartViewHigh.html

{% block main %}

    <h1 align="center">Analysis</h1>


{% block content %}

    <div id="container3" style="width:50%; height:400px;"></div>

{% endblock %}

{% block extrajs %}
<script>
   var endpoint = '/api/chart/data/';

    var labels01 = [];
    var defaultData01 = [];
    var labels02 = [];
    var defaultData02 = [];
    var labels03 = [];
    var defaultData03 = [];
    ...


 $.ajax({
    method: "GET",
    url: endpoint,
    success: function (data) {
            labels01 = data.labels01;
            defaultData01 = data.default01;
            labels02 = data.labels02;
            defaultData02 = data.default02;
            labels03 = data.labels03;
            defaultData03 = data.default03;
            labels04 = data.labels04;
            ...
            setChart()
        },
        error: function (error_data) {
            console.log("error");
            console.log(error_data)
        }
    });

       $(function () {
        $('#container3').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Members Registration Current Year '
            },
             credits: {
                enabled: false
            },
            xAxis: {
                type:"datetime",
            dateTimeLabelFormats:{
                year: '%Y'
            },
                tickInterval: 1,
                categories: [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ]
            },
            yAxis: {
                tickInterval: 1,
                minRange: 1,
                title: {
                    text: 'Data'
                }
            },
            tooltip: {
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Total',
                data: [
                    defaultData01,
                    defaultData02,
                    defaultData03,
                    defaultData04,
                    defaultData05,
                    defaultData06,
                    defaultData07,
                    defaultData08,
                    defaultData09,
                    defaultData10,
                    defaultData11,
                    defaultData12
                ]
            }]
        });
    });

---

views.py

 class ChartData(APIView):
     def get(self, request, format=None):
         today = datetime.date.today()

         # Months
         qs_count01 = Member.objects.filter(reg_date__year=today.year,
                                       reg_date__month='01').filter(
                                      association=self.request.user.association).count()
         qs_count02 = Member.objects.filter(reg_date__year=today.year,
                                       reg_date__month='02').filter(
                                        association=self.request.user.association).count()
         qs_count03 = Member.objects.filter(reg_date__year=today.year,
                                       reg_date__month='03').filter(
                                        association=self.request.user.association).count()
         ...

        labels01 = ["Jan"]             # I tried to add current year here.
        default_items01 = [qs_count01]
        labels02 = ["Feb"]
        default_items02 = [qs_count02]
        labels03 = ["Mar"]
        default_items03 = [qs_count03]
        ...

        data = {
           "labels01": labels01,
           "default01": default_items01,
           "labels02": labels02,
           "default02": default_items02,
           "labels03": labels03,
           "default03": default_items03,
            ...
        }
        return Response(data)

Answer 1

If the year doesn't need to be dynamic you can just insert the current year in the chart options xAxis title section using built-in JavaScript date object:

xAxis: {
    ...
    title: { 
        text: new Date().getFullYear()
    }
    ...
},

If you need the year to be dynamic then you can pass it along with your existing AJAX call.

views.py

class ChartData(APIView):
    def get(self, request, format=None):
    ...
    data = {
        "xAxisTitle": 2017 # assign year here dynamically using method of choice
        ...
    }

chartViewHigh.html

<script>
    ...
    var xAxisTitle = "";
    ...

    $.ajax({
        ...
        success: function (data) {
            ...
            xAxisTitle = data.xAxisTitle;
            ...
    });

    ...

        xAxis: {
        ...
        title: { 
            text: xAxisTitle
        }
        ...
    },