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.