Chartist line graphs animation starts from the bottom

[NekoLopez]

I'm using Chartist.js to generate line graphs, It works great, but I notice lines animation starts at the beginning in a certain height from chart bottom by default:

How can I modify my code to start lines animation from the bottom of the chart like this:

This is my code:

function graph(month,shop,sale){
  var data = {         
    labels: month,          
    series: [sale,shop]
    };

var options = {
  fullWidth:true,
  height: 380, 
  showPoint: true,
  low: 0,
  showArea: true,
  lineSmooth: false,
  plugins: [
      Chartist.plugins.legend({
          legendNames: ['Sale', 'Shop'],
      })
  ]
};

var chart = new Chartist.Line('.ct-chart', data, options);

chart.on('draw', function(data) {
  if(data.type === 'point') {
    var circle = new Chartist.Svg('circle', {
      cx: [data.x], cy:[data.y], r:[5],
    }, 'ct-circle');
    data.element.replace(circle);
  }
});

   chart.on('draw', function(data) {
     if(data.type === 'line' || data.type === 'area') {
       data.element.animate({
         d: {
            begin: 1000 * data.index,
            dur: 1000,
            from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
             to: data.path.clone().stringify(),
              easing: Chartist.Svg.Easing.easeOutQuint
          }
        });
      }
   });      
}

var data = {         
  labels: ['Enero', 'Febrero', 'Marzo','Abril','Mayo','Junio']
 };

 var options = {
    fullWidth:true,
    height: 380
 };

 new Chartist.Line('.ct-chart', data, options);

 $(document).ready(function(){
     $.ajax({
         url: "myfile.php",
         type: "GET",
         dataType: "json",
         success: function(resp)
         {
              var month = resp[0];
              var shop = resp[1];
              var sale = resp[2]; 
             graph(month,shop,sale);
        }
     });
  });

[rumansaleem]

instead of using translate(0, data.chartRect.height()) use translate(0, data.chartRect.y1)

[Arantiryo]

Hello @NekoLopez 👋

Chartist has recently been updated to version 1.0 with some new exciting changes like ESM and TypeScript support. The migration guide can be found right here.

Please let me know if the issue is still relevant to you so we can further investigate it!