CODEWITHSUNDEEP
vue.jshighcharts
Laurence
Laurence

Reputation: 145

Highcharts Y axis needs to be on the X axis

Im making a bar charts that updates live. I want it to update from right to left so that the newest one apears on the right and pushes the one before to the left. but currently its updating from down to up ( video example )

I tried using the inverted option on the chart but it did nothing. Any solutions? Live example on js fiddle. https://jsfiddle.net/ascnhf12/9/

these are the high chart options


export const liveChart = {
  liveChartInterval: null,
  colors: ['#547fff'],
  chart: {
    height: 170,
    type: 'bar',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function () {

        // set up the updating of the chart each second
        var series = this.series[0];
        liveChartInterval = setInterval(function () {
          var x = (new Date()).getTime(), // current time
            y = Math.random();
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    },
    inverted: true
  },

  time: {
    useUTC: false
  },
  credits: {
    enabled: false
  },
  title: false,
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      enabled: false
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Random data',
    data: (function () {
      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: Math.random()
        });
      }
      return data;
    }())
  }]
};

Upvotes: 1

Views: 195

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to use column chart type instead of bar:

chart: {
    type: 'column',
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/pthagcw6/

API Reference: https://api.highcharts.com/highcharts/chart.type

Docs: https://www.highcharts.com/demo/bar-basic

Upvotes: 1

Related Questions