Line Chart CanvasJS / ChartJS

Question

I am currently learning different visualization libraries, I have built a line chart using canvasjs, https://jsfiddle.net/r60xdqbb/

I am trying to built the same using chartjs, but unable to add similar animation. I found one https://codepen.io/anon/pen/xqGGaV

but it it is originating from bottom to top, I tried multiple approaches like by adding datasets to graph using looping, but in that case whole graph is increasing including X and Y axes.

Is there any way I can generate the same behavior using Chartjs?

Thanks in Advance.

CanvasJS JS:

var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      axisY: {
        title: " Y AXIS",
        tickLength: 0,
        lineThickness: 0,
        margin: 0,
        valueFormatString: " ", //comment this to show numeric values
        includeZero: false,
        gridColor: "transparent",
      },
      axisX: {
        title: "X Axis",
        tickLength: 0,
        margin: 0,
        lineThickness: 0,
        valueFormatString: " ", //comment this to show numeric values
        includeZero: false,
      },
      data: [{
        type: "line",
        color: "#E77973",
        dataPoints: [
          { y: 450 },
          { y: 414 },
          { y: 520 },
          { y: 460 },
          { y: 450 },
          { y: 500 },
          { y: 480 },
          { y: 480 },
          { y: 410 },
          { y: 500 },
          { y: 480 },
          { y: 510 }
        ]
      },
      {
        type: "line",
        lineDashType: "dash",
        color: "black",
        markerType: "none",
        dataPoints: [
          { y: 460 },
          { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }

        ]
      }]
    });
    chart.render();

ChartJS Javascript Code

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
    options: {
      legend: {
        display: false,
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: false,
          },
          ticks: {
            fontSize: 15,
            fontColor: 'lightgrey'
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false,
          },
          ticks: {
            beginAtZero: true,
            fontSize: 15,
            fontColor: 'lightgrey',
            maxTicksLimit: 5,
            padding: 25,
          }
        }]
      },
      tooltips: {
        backgroundColor: '#1e90ff'
      }
    },
    data: {
      labels: ['M', 'Tu', 'W', 'Th', 'F', 'Sa', 'Su'],
    datasets: [{
      data: [0, 0, 0, 11, 9, 17, 13],
      tension: 0.0,
      borderColor: 'rgb(255,190,70)',
      backgroundColor: 'rgba(0,0,0,0.0)',
      pointBackgroundColor: ['white', 'white', 'white', 'white', 'white', 'white', 'rgb(255,190,70)'],
      pointRadius: 4,
      borderWidth: 2
    }]
  }
});

elliottregan elliottregan · Accepted Answer · 2017-11-30T00:28:48

Chart.js doesn’t have animations like that. They only offer the “grow from the bottom” animation.

You might be able to hack something together using their onAnimationComplete callback, then adding a new data point after the last on is added. I don’t know what the performance would look like, but in theory it would work.

In my experience with Chart.js, if you want to do something that isn’t offered out of the box, you are better off looking at a different library.

Line Chart CanvasJS / ChartJS

1 Answers