Forums Ignite UI for jQuery
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
Close
Chung Khoa
150
Stacked Column grid line on top of chart in Chrome
posted

I'm using igdatachart and it output different result in Google Chrome and Mozilla Firefox:

my chart code looks like:

$("#my-chart").igDataChart({
        width: "100%",
        height: "400px",
        gap: 1,
        dataSource: dsource,
        axes: [
            {
                name: "NameAxis",
                type: "categoryX",
                title: "",
                label: "info[0]",
                labelVisibility: "collapsed",
                labelExtent: 100,
            },
            {
                name: "Score",
                type: "numericY",
                minimumValue: 0,
                title: ""
            }
        ],
        series: [
            function() {
                var seriesObj = {
                    name: "parent",
                    xAxis: "NameAxis",
                    yAxis: "Score",
                    type: "stackedColumn",
                    isHighlightingEnabled: true,
                    isTransitionInEnabled: true,
                    outline: "transparent",
                    series: [
                        {
                            name: "Topic1",
                            title: "Topic 1",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "tooltip-topic1",
                            valueMemberPath: "Topic1",
                        }, {
                            name: "TopicA",
                            title: "Topic A",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "tooltip-topicA",
                            valueMemberPath: "TopicA",
                        }, {
                            name: "TopicK",
                            title: "Topic K",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "tooltip-topicK",
                            valueMemberPath: "TopicK",
                        }........// more topics may go here
                    ]
                };
                return seriesObj;
            }()
        ],
        horizontalZoomable: false,
        verticalZoomable: false,
        windowResponse: "immediate"
    });
The result in firefox is good:

But the same, run on Google Chrome (35.0.1916.114 - latest version):

You may see the area that i note in red. The grid lines cross over the chart. However, not all of chart are crossed over, some are crossed, some other are not.

The display of the above image doesn't look good so please download the image to see it clearer.

It takes me time to investigate and search but i still have no idea, Please help me to investigate it.


Regards.

Parents
No Data
Reply
  • 15320
    Offline posted

    Hello Chung,

    Thank you for posting in our community.

    I created a sample using your code, however I was unable to reproduce the behavior that you're seeing.

    The Chrome version on my machine is also up to date, the same as yours. I'm attaching the sample that I've used to test this, for your reference.

    Please take a look at it and feel free to modify it in order to reproduce the issue, then send it back to me.

    If you need any further assistance, do not hesitate to contact me.

    Sincerely,

    Tsanna

    stackedColumnGridLineOnTopOfChart.zip
Children