jQuery UI Widgets Forums Chart Slanted labels for every column

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Slanted labels for every column #68301

    kc
    Participant

    How do I have slanted labels like this?

    Slanted Labels

    I want to display data just like this example, with jqxCharts. I have about 30 different categories to display.
    I can NOT use the legend because it is too confusing visually. I want the name of the column to be displayed on the column.

    Also, does the bar chart (horizontal) allow the name of the series to be displayed?

    • This topic was modified 8 years, 11 months ago by  Peter Stoev. Reason: Removed Link due to Forum Policy violation
    Slanted labels for every column #68325

    Dimitar
    Participant

    Hello kc,

    X-axis label rotation can be achieved by setting the labels.angle property of xAxis, as in the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_textrotation.htm?arctic.

    You can also display column/bar labels and format them however you like with the series formatFunction callback function. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Bar Series Example</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                // prepare chart data
                var sampleData = [
                    { Country: 'China', Population: 1347350000, Percent: 19.18 },
                    { Country: 'India', Population: 1210193422, Percent: 17.22 },
                    { Country: 'USA', Population: 313912000, Percent: 4.47 },
                    { Country: 'Indonesia', Population: 237641326, Percent: 3.38 },
                    { Country: 'Brazil', Population: 192376496, Percent: 2.74}];
    
                // prepare jqxChart settings
                var settings = {
                    title: "Top 5 most populated countries",
                    description: "Statistics for 2011",
                    showLegend: true,
                    enableAnimations: true,
                    padding: { left: 20, top: 5, right: 20, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    xAxis:
                    {
                        dataField: 'Country',
                        gridLines: { visible: true },
                        flip: false
                    },
                    valueAxis:
                    {
                        flip: true,
                        labels: {
                            visible: true,
                            formatFunction: function (value) {
                                return parseInt(value / 1000000);
                            }
                        }
                    },
                    colorScheme: 'scheme05',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                orientation: 'horizontal',
                                columnsGapPercent: 50,
                                toolTipFormatSettings: { thousandsSeparator: ',' },
                                series: [
                                        { dataField: 'Population', displayText: 'Population (millions)',
                                            labels: {
                                                visible: true,
                                                verticalAlignment: 'top',
                                                offset: { x: 0, y: 15 }
                                            },
                                            formatFunction: function (value, index, series) {
                                                return series.displayText + ': ' + value;
                                            }
                                        }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.