CODEWITHSUNDEEP
javascriptangulartypescripthighcharts
Fallenreaper
Fallenreaper

Reputation: 10704

scrollable highchart works in JS but has issues when running through Angular HighCharts?

I was looking at this codebase https://jsfiddle.net/mushigh/zvq46kg8/ which gave me insight on how to develop a scrollbar. When attemptng to do it myself though it doesnt work correctly.

The fiddle shows the following set up for the chart:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min: 0,
    max: 5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      type: 'pie',
      name: 'Total consumption',
      zIndex: 9,
      data: [{
        name: 'Jane',
        y: 13,
        color: Highcharts.getOptions().colors[0] // Jane's color
      }, {
        name: 'John',
        y: 23,
        color: Highcharts.getOptions().colors[1] // John's color
      }, {
        name: 'Joe',
        y: 19,
        color: Highcharts.getOptions().colors[2] // Joe's color
      }],
      center: [300, 10],
      size: 50,
      showInLegend: false,
      dataLabels: {
        enabled: false
      }
    }, {
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});

I was trying to implement this with angular-highcharts through and while it looks like everything works, the horizontal bars are not hidden when outside of the view port.

It looks like this though:enter image description here

You can see there are some bars which show when they should not. (This is in comparison to the above jsfiddle).

I created a repo in order to create reproducibility. You should just need to npm intall and then ng serve. The repo is located at: https://github.com/fallenreaper/highchart-angular-scrolling.git

Everything should be in place and you should be able to serve the app, go to localhost and see the issue. I didnt update it YET but i can revert the dataset to the one given in the jsfiddle as well.

Is this a glitch with Angular HighCharts, or is here something else going on?

Upvotes: 0

Views: 153

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Here is my reproduction of the demo which you have shared in the Angular environment.

Demo: https://codesandbox.io/s/angular-ldxch

Please notice that this example uses the Highstock, not Highcharts - scrollbar is not implemented in Highcharts.

Highcharts use the scrollablePlotArea instead: https://api.highcharts.com/highcharts/chart.scrollablePlotArea

Upvotes: 2

Related Questions