CODEWITHSUNDEEP
vue.jschart.js
isebarn
isebarn

Reputation: 3950

Can I use a custom data format when using Vue + Chartjs

Everywhere I look the format of the data for a chartjs component must be on the form

[
  {x: x1, y: y1},
  {x: x2, y: y2},
  .
  .
  {x: xn, y: yn},
]

when plotting f.x a line chart

<chartjs-line
  :data="item"
/>

However, my data is in another format

[
  {date: date_1, value: value_1},
  {date: date_2, value: value_2},
  .
  .
  {date: date_n, value: value_2},
]

Is there a way to pass this format over to the component so I wont need to reformat the data?

Upvotes: 1

Views: 445

Answers (1)

NBlack
NBlack

Reputation: 304

x and y are points in space, dataset not allow change of name.

Nearest option comes here: https://www.chartjs.org/docs/latest/developers/updates.html#updating-options

But why go so far if you can do your problem fixed with a computed property:

computed:{
   transformData(){
      return this.data.map(el=> { return {x:el.date, y:el.date} })
   }
}

Upvotes: 1

Related Questions