Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
110
igDataChart Line grid, XAxis labels are not fully visible
posted

Hello,

I am trying to make a line grid, the labels I have are DateTimes and are long and this cause problems because I cannot make them fully visible.

I would like the text to wrap to multiple lines (break the dateTime to date and time, 19/05/2021/newLine1:51).

At first, I tried by playing with the margins to make the labels visible.

I also read this post, but the solution did not work for my case

https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery/95152/word-wrap-within-an-axis-label

Here is the code I use

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        td {
            vertical-aligntop;
        }

        .chartElement {
            padding-bottom20px;
        }
    </style>
    <title>Bar and Column Series</title>
        rel="stylesheet" />
        rel="stylesheet" />
    <script src="">ajax.aspnetcdn.com/.../modernizr-2.8.3.js"></script>
    <script src="">code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="">code.jquery.com/.../jquery-ui.min.js"></script>
    <script src="">www.igniteui.com/.../adventureworks.min.js"></script>
</head>

<body>
    <script type="text/javascript">

        var lineData = { "\u002796330\u0027": [{ "Label""19/3/2021\r\n15:00""test1"100"test2"972.22"test3"100"test4"972.22 }, { "Label""19/3/2021\r\n17:00""test1"100"test2"4666.67"test3"8.33"test4"388.89 }], "\u0027968\u0027": [{ "Label""19/3/2021 16:04""test1"75"test2"226.22"test3"49.12"test4"83.33 }] };
        function doGeneration() {
        }
        function assignData(iddata) {
            $("#" + id).igDataChart(
                {
                    dataSource: data
                }
            );
        };
        function createGrid(idlegendIdwcNamedata) {
            $('#' + id).igDataChart(
                {
                    width: "100%",
                    height: "400px",
                    legend: { element: legendId },
                    axes: [
                        {
                            name: "xAxis",
                            type: "categoryX",
                            label: "Label",
                            crossingAxis: "yAxis",
                            labelLeftMargin: 10,
                            titlePosition: "bottom",
                        },
                        {
                            name: "yAxis",
                            type: "numericY",
                            minimumValue: 0,
                            maximumValue: 100,
                            labelHorizontalAlignment: "right",
                            labelRightMargin: 10
                        }
                    ],
                    series: [
                        {
                            name: "series1",
                            title: "test1",
                            markerType: "triangle",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test1",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series2",
                            title: "test2",
                            markerType: "circle",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test2",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series3",
                            title: "test3",
                            markerType: "diamond",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test3",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series4",
                            title: "test4",
                            markerType: "square",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test4",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        }
                    ],
                    horizontalZoomable: true,
                    verticalZoomable: false,
                    windowResponse: "immediate",
                }
            );
            assignData(iddata);
        }
        $('#LineCharts').ready(function () {
            var counter = 1;
            $.each(lineDatafunction (iv) {
                var lineChartName = "lineChart" + counter;
                var legendName = "lineLegend" + counter;
                $('#LineCharts').append('<div style="display: table; margin-top: 50px">');
                $('#LineCharts').append('<div id="' + lineChartName + '" class="chartElement" style="display: table-cell; width: auto; padding-right: 50px;"></div>');
                $('#LineCharts').append('<div id="' + legendName + '" style="width: 100px; display: table-cell;"></div>');
                $('#LineCharts').append('</div>');
                createGrid(lineChartNamelegendNameiv)
                counter++;
            });
        });
    </script>
    <hr>
    <div id="LineCharts"></div>
</body>

</html>
Parents
No Data
Reply
  • 28925
    Offline posted

    Hi, 

    You can add a LabelExtent to give the chart some margin or LabelAngle to direct the labels away from each other if they're overlapping on the Axis but you cannot unfortunately wrap the text. You could add another axis and break up the labels but I would suggest submitting a new idea on this behalf. 

    You can suggest new product ideas for future versions (or vote for existing ones) at <https://www.infragistics.com/community/ideas>.
    Submitting your idea will allow you to communicate directly with our product management team, track the progress of your idea at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
    Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it.

    Let me know if you have any questions.

Children