Why are RGraph labels not showing?

Question

I have a simple mock-up of a chart using RGraph.net and I can't work out why the month labels for the columns, and the "GBP" label for the axis are not showing.

I have put the code into https://jsfiddle.net/Abeeee/kcwqn850/32/

var chart = new RGraph.Bar('chart_column', [0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 40, 489, 1011])
  .set('zoom.factor', 11)
  .set('shadow', true)
  .set('labels', ['Jul18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'])
  .set('shadow.offsetx', 5)
  .set('shadow.offsety', 5)
  .set('shadow.blur', 9)
  .set('gutter.left', 65) 
  .set('text.font', 'Segoe UI')
  .set('colors', ['#FF0000'])
  .set('align', 'left')
  .set('title.yaxis', 'GBP')
  .set('title.yaxis.size', 10)
  .set('title.yaxis.x', 7)
  .set('title.yaxis.y', 120)
  .set('title.yaxis.bold', false)
  .set('grid.hoverable', true)
  .set('tooltips.effect', 'fade')
  .set('tooltips', ['GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 165', 'GBP 40', 'GBP 489', 'GBP 1,011'])
  .set('tooltips.event', 'mousemove')
  .on('mousemove', function(e, shape) {
      e.target.style.cursor = 'pointer';
  })
  .on('click', function myClick(e, shape) {
      var index = shape[5];
      alert(labels[index]);
  })
.draw();

I want to see the month labels on the bottom (below the axis/columns) and the GBP label on the left of the chart - but nothing is showing.

What is missing?

Thanks Abe

Answer 1

You're using the old property names. With version 5 many were given new names. Eg labels becomes xaxisLabels. Here's your code updated:

new RGraph.Bar({
    id: 'chart_column',
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 40, 489, 1011],
    options: {
        shadow: true,
        xaxisLabels: ['Jul18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        shadowOffsetx: 5,
        shadowOffsety: 5,
        shadowBlur: 9,
        marginLeft: 65,
        textFont: 'Segoe UI',
        colors: ['red'],
        yaxisTitle: 'GBP',
        yaxisTitleSize: 10,
        yaxisTitleX: 7,
        yaxisTitleY: 120,
        yaxisTitleBold: false,
        tooltipsEffect: 'fade',
        tooltips: ['GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 165', 'GBP 40', 'GBP 489', 'GBP 1,011'],
        tooltipsEvent: 'mousemove'
    }
}).draw().on('mousemove', function (e, shape)
{
    e.target.style.cursor = 'pointer';
    
}).on('click', function (e, shape)
{
    var index = shape[5];
    alert(labels[index]);

}).draw();