Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live column chart not rendering properly in case of more than 50 columns #9487

Closed
arwindraj opened this issue Nov 21, 2018 · 3 comments

Comments

@arwindraj
Copy link

commented Nov 21, 2018

Expected behaviour

Actual behaviour

Live demo with steps to reproduce

Product version

Affected browser(s)

@arwindraj

This comment has been minimized.

Copy link
Author

commented Nov 21, 2018

Expected behaviour

  • Live chart should render properly
    Actual behaviour
  • Live column chart not rendering properly in case of more than 50 columns. its truncating the x axis labels and flickering
    Live demo with steps to reproduce
    Code below
  <script>
        Highcharts.chart('container', {
            chart: {
                type: 'column',
                height: 500,
               
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Operational Availability - DK2L0 Main 1'
            },
            legend: {
                enabled: false
            },

            data: {
                csvURL: 'http://localhost:62888//Report/GetEqupCSV/2GR/397129',
                enablePolling: true,
                dataRefreshRate: 5
            },
            plotOptions: {
                bar: {
                    colorByPoint: true
                },
                series: {
                    zones: [{
                        color: '#990000',
                        value: 94
                    }, {
                        color: '#FFFF00',
                        value: 96
                    },
                    {
                        color: '#009900',
                        value: Number.MAX_VALUE
                    }],
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                window.open('http://localhost:62888//Report/OADrildown/' + '2GR/'+'397129/' + this.options.name, '_blank', 'toolbar=0,location=0,menubar=0');                             
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.2f}%',
                        color: 'black',

                    }
                    
                }
            },
            tooltip: {
                valueDecimals: 2,
                valueSuffix: '%'
            },
            xAxis: {


                title: {
                    text: 'Equipment'
                },
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '8px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                floor: 0,
                ceiling: 100,
                max: 100,
                title: {
                    text: 'OA%'
                },
                plotBands: [{
                    from: 0,
                    to: 94,
                    color: '#FFEBEE'
                }, {
                    from: 94,
                    to: 96,
                    color: '#FFFDE7'
                }, {
                    from: 96,
                    to: 100,
                    color: "#E8F5E9"
                }]
            }
        });
        </script>
==============
CSV Data 
===========
EquipName,OA
NAMTS-00099,100
NAMAM-00124,100
NAMAM-00125,96.66
NAMAM-00122,99.72
NAMAM-00123,99.83
NDMAM-00052,99.73
NAMAM-00105,100
NAMHP-00003,100
NAMAM-00127,99.92
NAMZY-00295,100
NAMAM-00128,99.27
NAMZY-00292,100
NDMAM-00051,99.92
St 01 Main 1,97.11
St 02 Main 1,100
St 03 Main 1,94.51
St 04 Main 1,97.05
St 05 Main 1,100
St 06 Main 1,98.51
St 07 Main 1,98.78
St 08 Main 1,99.98
St 09 Main 1,99.78
St 10 Main 1,99.61
St 11 Main 1,100
St 12 Main 1,96.73
NAMZY-00277,99.96
NAMZY-00276,100
NAMZY-00300,100
NAMZY-00278,99.94
NAMZY-00279,99.8
NAMZY-00280,99.44
NAMZK-00071,100
NAMCK-00068-11-1,84.84
NAMCK-00068-11-2,84.58
St 13 Main 1,99.98
St 14 Main 1,99.01
St 15 Main 1,99.71
St 16 Main 1,99.59
St 17 Main 1,99.77
St 18 Main 1,100
St 19 Main 1,99.09
St 20 Main 1,100
St 21 Main 1,99.56
St 22 Main 1,99.98
St 23 Main 1,97.85
St 24 Main 1,98.59
St 25 Main 1,98.78
St 26 Main 1,100
St 27 Main 1,100
St 28 Main 1,100
St 29 Main 1,95.73
St 30 Main 1,99.6

Product version
Affected browser(s)
All

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Nov 23, 2018

Thanks for reporting!

Demo

Reduced to chart.update: http://jsfiddle.net/highcharts/576qpym9/

The categories are lost, falling back to numbers.

Workaround

Set a higher cropThreshold: http://jsfiddle.net/highcharts/576qpym9/2/

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Nov 23, 2018

Looks like a manifestation of #5857.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.