[Vuejs]-Use vue.js with chartist.js to create a chart that track balance progress

1👍

You just need two convert your data into two arrays, dates for your x-axis and values for your y-axis.

data () {
  return {
    input: [
      ['23/03/2020', '2,309.99', '2,332.25'],
      ['24/03/2020', '2,343,30', '2,424.62'],
      ['25/03/2020', '2,424.62', '2,519.56']
   ],
  }
},
computed: {
   dates () {
       return this.input.map(x=>x[0])
   },
   values () {
       return this.input.map(
         x => parseFloat(x[2].replace(',','')) - 
              parseFloat(x[1].replace(',',''))
       )
   }
}

example with vue-chartjs: https://jsfiddle.net/ellisdod/9vz2qukj/6/

Leave a comment