jQWidgets Forums

Tagged: vertical aligning label bar chart

This topic contains 9 replies, has 3 voices, and was last updated by ivailo 9 years, 7 months ago.

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

Author

Vertical aligning chart labels Posts

May 25, 2015 at 11:10 am Vertical aligning chart labels #71522

vinodn

Participant

Hi,

I have labels in my bar chart that are displayed vertically. However, they are appearing with vertical alignment of middle. Is there any way that I can have them rendered with vertical alignment to top so that all the labels are close to the x-axis?

Vertical alignment of labels

May 25, 2015 at 12:34 pm Vertical aligning chart labels #71531

ivailo

Participant

Hi vinodn,

Unfortunately the widget does not offer that kind of feature.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 26, 2015 at 9:23 am Vertical aligning chart labels #71558

ivailo

Participant

UPDATE

Hi vinodn,

We found the right way to fix that problem.
The solution is:

 labels:
                    {
                        angle: 90,
                        horizontalAlignment: 'right',
                        verticalAlignment: 'center',
                        rotationPoint: 'left',
                        offset: { y: -30 }
                    }

And here is the whole code example.

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxdata.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">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Day',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    axisSize: 'auto',
                    labels:
                    {
                        angle: 90,
                        horizontalAlignment: 'right',
                        verticalAlignment: 'center',
                        rotationPoint: 'left',
                        offset: { y: -30 }
                    }
                },
                valueAxis:
                {
                    unitInterval: 10,
                    title: { text: 'Time in minutes' },
                    tickMarks: { color: '#BCBCBC' },
                    gridLines: { color: '#BCBCBC' },
                    labels: {
                        horizontalAlignment: 'right',
                        formatSettings: { sufix: '%' }
                    }
                },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn100',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 27, 2015 at 10:55 am Vertical aligning chart labels #71640

vinodn

Participant

Thanks for your reply Ivailo. Am using the charts within angularjs framework. Below is my current source code. I tried using the labels property within the categoryAxis section but it changes nothing. Infact, if I remove my textRotationAngle property and try using the “angle:90” property of “labels”, my labels stop rendering vertically too. It’s as if my chart doesn’t recognize the labels property altogether neither it gives any error.

Please advise if am doing something wrong.

HTML


<div id="jqxSectorAllocationChart" style="width: 950px; height: 230px" ng-jqwidgets="jqxChart" ng-show="!SectorAllocation_NoData"
        ng-jqxsettings="{ title: Sector_title, description: Sector_description, borderLineColor: Sector_borderLineColor, showLegend: Sector_showLegend,
                        legendLayout: Sector_legendLayout, padding: Sector_padding, titlePadding: Sector_titlePadding, source: Sector_data,
                        categoryAxis: Sector_categoryAxis, colorScheme: Sector_colorScheme, seriesGroups: Sector_seriesGroups,  backgroundColor: Sector_backgroundColor,
                        enableAnimations: Sector_enableAnimations, toolTipShowDelay: Sector_toolTipShowDelay, toolTipHideDelay: Sector_toolTipHideDelay }"></div>

======================================
Javascript


        p_ObjScope.Sector_data = p_ObjRootItem;
        p_ObjScope.Sector_title = "";
        p_ObjScope.Sector_description = "";
        p_ObjScope.Sector_enableAnimations = true;
        p_ObjScope.Sector_showLegend = false;
        p_ObjScope.Sector_toolTipShowDelay = 100;
        p_ObjScope.Sector_toolTipHideDelay = 2000;
        p_ObjScope.Sector_padding = { left: 0, top: 20, right: 100, bottom: 0 };
        p_ObjScope.Sector_legendLayout = { left: 865, top: 0, width: 300, height: 200, flow: 'vertical' };
        p_ObjScope.Sector_borderLineColor = '#f3f4f6';
        p_ObjScope.Sector_backgroundColor = '#f3f4f6';
        p_ObjScope.Sector_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
        p_ObjScope.Sector_categoryAxis =
            {
                dataField: 'sector',
                displayText: 'Sector',
                textRotationAngle: 270,
                verticalDescriptionAlignment: 'left',
                showTickMarks: false,
                showGridLines: false,
                textOffset: { x: 0, y: 5 },
                formatFunction: function (value) {
                    var res = value;

                    if (res.length > 20) {
                        res = res.substring(0, 20) + "...";
                    }

                    return res;
                },
                toolTipFormatFunction: function (value) {
                    return value;
                }
            };
        p_ObjScope.Sector_colorScheme = 'myScheme';
        p_ObjScope.Sector_seriesGroups =
            [
                {
                    type: 'column',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    columnsMaxWidth: 50,
                    enableSeriesToggle: false,
                    valueAxis:
                        {
                            minValue: 0,
                            //unitInterval: l_MaxValue,
                            showTickMarks: false,
                            description: '%',
                            formatSettings: {
                                text: '',
                                decimalPlaces: 2
                            }
                        },
                    series: [
                       { dataField: 'total_perc', displayText: 'Total', showLabels: false, labelsVerticalAlignment: 'top', formatFunction: function (value) { if (isNaN(value)) { return value; } else { return value + '%'; } } }
                    ]
                }
            ];

May 27, 2015 at 12:06 pm Vertical aligning chart labels #71649

ivailo

Participant

Hi vinodn,

1. Update to the last version – 3.8.0
2. Use exact given properties about this feature:

labels:
                    {
                        angle: 90,
                        horizontalAlignment: 'right',
                        verticalAlignment: 'center',
                        rotationPoint: 'left',
                        offset: { y: -30 }
                    }

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 27, 2015 at 1:04 pm Vertical aligning chart labels #71658

vinodn

Participant

Done. Thanks

June 3, 2015 at 1:11 pm Vertical aligning chart labels #71974

vinodn

Participant

Hi Ivailo,

The solution worked for my chart when it consists of multiple bars, that too in IE 9 and Chrome. It however doesn’t work for IE8.
Also, charts where there are only one bar in it, the solution fails in all the above mentioned 3 browsers.

Please find the screenshot and source code below.

Screenshot

Source Code


        p_ObjScope.Sector_data = p_ObjRootItem;
        p_ObjScope.Sector_title = "";
        p_ObjScope.Sector_description = "";
        p_ObjScope.Sector_enableAnimations = true;
        p_ObjScope.Sector_showLegend = false;
        p_ObjScope.Sector_toolTipShowDelay = 100;
        p_ObjScope.Sector_toolTipHideDelay = 2000;
        p_ObjScope.Sector_padding = { left: 0, top: 20, right: 100, bottom: 10 };
        p_ObjScope.Sector_legendLayout = { left: 865, top: 0, width: 300, height: 200, flow: 'vertical' };
        p_ObjScope.Sector_borderLineColor = '#f3f4f6';
        p_ObjScope.Sector_backgroundColor = '#f3f4f6';
        p_ObjScope.Sector_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
        p_ObjScope.Sector_categoryAxis =
            {
                dataField: 'sector',
                displayText: 'Sector',
                showTickMarks: false,
                showGridLines: false,
		labels:
                    {
                        angle: 270,
                        horizontalAlignment: 'right',
                        verticalAlignment: 'center',
                        rotationPoint: 'right',
                        offset: { y: -50 }
                    },
                formatFunction: function (value) {
                    var res = value;

                    if (res.length > 20) {
                        res = res.substring(0, 20) + "...";
                    }

                    return res;
                },
                toolTipFormatFunction: function (value) {
                    return value;
                }
            };
        p_ObjScope.Sector_colorScheme = 'myScheme';
        p_ObjScope.Sector_seriesGroups =
            [
                {
                    type: 'column',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    columnsMaxWidth: 50,
                    enableSeriesToggle: false,
                    valueAxis:
                        {
                            minValue: 0,
                            showTickMarks: false,
                            description: '%',
                            formatSettings: {
                                text: '',
                                decimalPlaces: 2
                            }
                        },
                    series: [
                       { dataField: 'total_perc', displayText: 'Total', showLabels: false, labelsVerticalAlignment: 'top', formatFunction: function (value) { if (isNaN(value)) { return value; } else { return value + '%'; } } }
                    ]
                }
            ];

June 5, 2015 at 12:16 pm Vertical aligning chart labels #72087

ivailo

Participant

Hi vinodn,

We will investigate the problem.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 30, 2015 at 5:04 am Vertical aligning chart labels #74292

Nimesh Jain

Participant

Hi Ivailo,
Any update on the above issue???

July 30, 2015 at 5:27 am Vertical aligning chart labels #74300

ivailo

Participant

Hi Nimesh Jain,

Unfortunately there is no update about this issue.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.