Home/ Questions/Q 9205341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:55:44+00:00

I want to create a graph stacked column using Highcharts plugin with the data

  • 0

I want to create a graph “stacked column” using Highcharts plugin with the data in a XML file. (See here)
My XML file is:

<?xml version="1.0" encoding="utf-8"?>
<chart>
<categories>
<item>2000</item>
<item>2001</item>
<item>2002</item>
....    </categories>
<series>
<name>Impots locaux</name>
<data>
<point>231</point>
<point>232</point>
....    </data>
</series>
<series>
<name>Autres impots et taxes</name>
<data>
<point>24</point>
<point>27</point>
<point>37</point>
.....</data>
</series>
<series>
<name>Dotation globale de fonctionnement</name>
<data>
<point>247</point>
<point>254</point>
....</data>
</series>
</chart>

The HTML coding is:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mazet</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <script type="text/javascript" src="../js/themes/gray.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {


        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Produits de fonctionnement du Mazet-Saint-Voy'
            },
              subtitle: {
            text: 'Source : <a href="http://alize22.finances.gouv.fr/communes/eneuro/RDep.php?type=BPS&dep=043" target="_blank">Ministère de l\'économie et des finances</a>'
        },
        tooltip: {
            formatter: function () {
                return '' + this.y +  ' €/hab. en ' +  this.x;
            }
        },

        plotOptions: {
            column: {
               /* pointPadding: 0.2,
                borderWidth: 0,*/
                   stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
            xAxis: {
                categories: [],
                   labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

            },
            yAxis: {
                title: {
                    text: 'En euros par habitant'
                },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
            series: []
        };

        // Load the data from the XML file 
        $.get('../xml/43130.xml', function(xml) {

            // Split the lines
            var $xml = $(xml);

            // push categories
            $xml.find('categories item').each(function(i, category) {
                options.xAxis.categories.push($(category).text());
            });

            // push series
            $xml.find('series').each(function(i, series) {
                var seriesOptions = {
                    name: $(series).find('name').text(),
                    data: []
                };

                // push data points
                $(series).find('data point').each(function(i, point) {
                    seriesOptions.data.push(
                        parseInt($(point).text())
                    );
                });

                // add it to the options
                options.series.push(seriesOptions);
            });
            var chart = new Highcharts.Chart(options);
        });


    });
    </script>

</head>
<body>

        <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>


</body>
</html>

Where and how code ‘dataLabels’ to data of my 3 series is vertical?

dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

Merci.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can set rotation to 90. demo

    Or you can set useHTML to true and style it using css.

    .highcharts-data-labels span {
    width: 7px;
    white-space: normal !Important;
}

    Then your dataLabels formatter should be:

    formatter: function() {
    return this.y.toString().split('').join(' ');
}

    This way you’ll get the labels the following way.

    9
    0
    0

    demo

    • 0