CODEWITHSUNDEEP
highcharts
Joel Sherriff
Joel Sherriff

Reputation: 25

chart.update moving bar incorrectly

I have a chart that gets updated with new data and if the config is "almost" the same (new subtitle, data slightly different, etc...but same number of data values) I'm finding the last bar gets moved on top of the first bar, over laying it. Color me baffled. I'm using 9.3.3 but have repro'd it in "current" in this jsfiddle:

https://jsfiddle.net/wxpe6v2r/28/

const chart = Highcharts.chart('container', {
     "title": {
         "text": "Top 10"
     },
     "subtitle": {
         "text": "Everything",
         "useHTML": true
     },
     "colors": [
         "#F5827A",
         "#FBB3AF"
     ],
     "chart": {
         "marginLeft": 60,
         "marginRight": 60,
         "spacingTop": 10,
         "spacingRight": 0,
         "spacingBottom": 8,
         "spacingLeft": 10,
         "zoomType": "",
         "alignTicks": false,
         "animation": true
     },
     "plotOptions": {
         "series": {
             "animation": true,
             "shadow": false,
             "borderWidth": 0,
             "marker": {
                 "enabled": true,
                 "states": {
                     "hover": {
                         "enabled": false
                     }
                 }
             }
         }
     },
     "legend": {
         "enabled": true
     },
     "series": [
         {
             "name": "Count",
             "type": "column",
             "data": [
                 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9
             ]
         },
         {
             "name": "Cumulative Percent",
             "yAxis": 1,
             "type": "line",
             "data": [
                 18.18, 22.73, 27.27, 31.82, 36.36, 40.91, 45.45, 50, 54.55, 59.09, 100
             ]
         }
     ],
     "xAxis": {
         "type": "category",
         "title": {
             "text": "File",
             "enabled": false,
         },
         "categories": [
             "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "Other"
         ]
     },
     "yAxis": [
         {
             "min": 0,
             "max": 9,
             "lineWidth": 1,
             "allowDecimals": false,
             "title": {
                 "text": "Count",
                 "rotation": 270,
                 "style": {
                     "fontWeight": "bold"
                 }
             },
             "labels": {
                 "enabled": true
             },
             "startOnTick": false,
             "endOnTick": false
         },
         {
             "min": 0,
             "max": 100,
             "gridLineWidth": 0,
             "lineWidth": 1,
             "opposite": true,
             "title": {
                 "text": "Cumulative Percent",
                 "rotation": 270,
                 "style": {
                     "fontWeight": "bold"
                 }
             },
             "labels": {
                 "enabled": true,
             }
         }
     ],
});

document.getElementById('update').addEventListener('click', () => {
 chart.update({
     "title": {
         "text": "Top 10"
     },
     "subtitle": {
         "text": "Everything",
         "useHTML": true
     },
     "colors": [
         "#F5827A",
         "#FBB3AF"
     ],
     "chart": {
         "marginLeft": 60,
         "marginRight": 60,
         "spacingTop": 10,
         "spacingRight": 0,
         "spacingBottom": 8,
         "spacingLeft": 10,
         "zoomType": "",
         "alignTicks": false,
         "animation": true
     },
     "plotOptions": {
         "series": {
             "animation": true,
             "shadow": false,
             "borderWidth": 0,
             "marker": {
                 "enabled": true,
                 "states": {
                     "hover": {
                         "enabled": false
                     }
                 }
             }
         }
     },
     "legend": {
         "enabled": true
     },
     "series": [
         {
             "name": "Count",
             "type": "column",
             "data": [
                 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11
             ]
         },
         {
             "name": "Cumulative Percent",
             "yAxis": 1,
             "type": "line",
             "data": [
                 18.18, 22.73, 27.27, 31.82, 36.36, 40.91, 45.45, 50, 54.55, 59.09, 100
             ]
         }
     ],
     "xAxis": {
         "type": "category",
         "categories": [
             "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "Other"
         ]
     },
     "yAxis": [
         {
             "min": 0,
             "max": 11,
             "lineWidth": 1,
             "allowDecimals": false,
             "title": {
                 "text": "Count",
                 "rotation": 270,
                 "style": {
                     "fontWeight": "bold"
                 }
             },
             "labels": {
                 "enabled": true
             },
             "startOnTick": false,
             "endOnTick": false
         },
         {
             "min": 0,
             "max": 100,
             "gridLineWidth": 0,
             "lineWidth": 1,
             "opposite": true,
             "title": {
                 "text": "Cumulative Percent",
                 "rotation": 270,
                 "style": {
                     "fontWeight": "bold"
                 }
             },
             "labels": {
                 "enabled": true,
             }
         }
     ],
 }
);
});

Just hit the update button and the "Other" bar is moved to the first position, overlaying the "A" bar.

Any suggestions on what I'm doing wrong are appreciated.

P.S. I have noticed after playing with the jsfiddle that it moves the bar to the first matching series[0] data value. That is, given series[0] of [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9], that gets updated to [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11], it puts the [10] bar (value 11) over the [0] bar (value 4). If I change the initial series[0] values to [5, 2, 1, 1, 1, 1, 1, 1, 1, 1, 9], upon update() it moves the value 11 bar to series[2], the first matching value. I don't get it.

Upvotes: 1

Views: 104

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Defining xAxis.categories without xAxis.type is enough and it resolves the issue.

However, the problem looks like a bug, so you can report it on Highcharts Github: https://github.com/highcharts/highcharts/issues

  "xAxis": {
    // "type": "category",
    "title": {
      "text": "File",
      "enabled": false,
    },
    "categories": [
      "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "Other"
    ]
  }

Live demo: https://jsfiddle.net/BlackLabel/8nu9x6g5/

API Reference: https://api.highcharts.com/highcharts/xAxis.categories

Upvotes: 1

Related Questions