CODEWITHSUNDEEP
javascripthighcharts
Nadishan
Nadishan

Reputation: 580

High Chart X Axis to display month and year

In this high chart coding, I want to change X Axis to display month and year.(ex- Feb-20014) Here my code work. How can do it? I want to go for at least 5 years. My chart is column chart. Please note that

<script type="text/javascript">
                    $(function () {
        // Set up the chart
                        var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'column',
                                margin: 75,
                                options3d: {
                                    enabled: false,
                                    alpha: 15,
                                    beta: 15,
                                    depth: 50,
                                    viewDistance: 25
                                }
                            },
                            title: {
                                text: 'Payment Details'
                            },
                            plotOptions: {
                                column: {
                                    depth: 25
                                }
                            },
                            series: [{
                                    data: [
        <?php
        for ($i = 0; $i <= 12; $i++) {
            echo $i. ',';
        }
        ?>

                                    ]

                                }]
                        });

                        function showValues() {
                            $('#R0-value').html(chart.options.chart.options3d.alpha);
                            $('#R1-value').html(chart.options.chart.options3d.beta);
                        }

        // Activate the sliders
                        $('#R0').on('change', function () {
                            chart.options.chart.options3d.alpha = this.value;
                            showValues();
                            chart.redraw(false);
                        });
                        $('#R1').on('change', function () {
                            chart.options.chart.options3d.beta = this.value;
                            showValues();
                            chart.redraw(false);
                        });

                        showValues();
                    });
                </script>

Upvotes: 0

Views: 1651

Answers (1)

Swetha
Swetha

Reputation: 746

Try this :

xAxis: {
    type: 'datetime',          
    labels: {
        formatter: function() {
             return Highcharts.dateFormat('%b-%Y', this.value);
        }
    }
},

From the docs:

%b - Abbreviated month name, based on the locale(Jan through Dec)

%Y - Four digit representation for the year(Example: 2038)

Upvotes: 2

Related Questions