Chart value only appears when page resolution is changed

Question

I have 2 Javascript charts that are receiving values through a PHP file. However these values only appear on the chart when the resolution of the web page for some reason is changed. This is the Javascript code I have:

demo = { 
  initDashboardPageCharts: function() {
    var dataSales = {
      labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
      series: []
    };

    var optionsSales = {
      lineSmooth: false,
      low: 0,
      high: 100,
      showArea: true,
      height: "245px",
      axisX: {
        showGrid: false,
      },
      lineSmooth: Chartist.Interpolation.simple({
        divisor: 3
      }),
      showLine: false,
      showPoint: false,
      fullWidth: false
    };

    var responsiveSales = [
      ['screen and (max-width: 640px)', {
        axisX: {
          labelInterpolationFnc: function(value) {
            return value[0];
          }
        }
      }]
    ];

    var chartHours = Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);
  }
}

If you want to see for yourself, you can see here. How can I fix this so the values always appear ?

Answer 1

After:

var chartHours = Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);

Add:

setTimeout(function() { chartHours.update(); }, 0);

Related problem: https://github.com/willsoto/angular-chartist.js/issues/22