Chartjs-Vue JS setting data collection in component

by

1👍

✅

Then based on your comment you could to something like this. Probably more elegant way but should work.

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    activeDataSet: {
      type: String,
      required: true,
      validator: value => ["a", "b", "c"].indexOf(value) > -1
    }
  },
  computed: {
    myChartData() {
      const example1 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example2 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example3 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      if(this.activeDataSet === 'a') return example1
      if(this.activeDataSet === 'b') return example2
      if(this.activeDataSet === 'c') return example3
    }
  }
};
</script>

and then to use

<template>
    <this-chart activeDataSet="a"></this-chart>
</template>

1👍

I think you’re looking for component props.

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    myChartData: {
      type: Array,
      required: true
    }
  }
};
</script>

And to use it

<template>
    <this-chart :my-chart-data="exampleData"></this-chart>
</template>

<script>
export default {
  name: "example-component",
  data() {
    return {
      exampleData: [{ x: 5, y: 10 }, { x: 6, y: 11 }]
    };
  }
};
</script>

Please format your code better next time.

Leave a comment