CODEWITHSUNDEEP
vue.jsvuejs2chart.jsvue-chartjs
user19395617
user19395617

Reputation: 81

vue2 chart.js insert time data on x-axis in real time

I want to put time data in x-axis labels in vue chart.js . There is a way in pure js code, not vue, but I can't find it in vue version. Below is my code.

export default {
  name: "LineChart",
  components: {
    LineChartGenerator,
  },
  props: {
    chartId: {
      type: String,
      default: "line-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 280,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chartData: {
        labels: "???",
        datasets: [
          {
            label: "vacuum",
            backgroundColor: "#534e7f",
            data: this.$store.state.cnc1,
          },
        ],
      },
      chartOptions: {
        maintainAspectRatio: false,
      },
    };
  },
};

I tried a lot of things similar to the one below but failed. I also installed the extension but it failed.

 scales: {
      x: {
        type: "time",
        time: {
          unit: "day",
        },
      },
    },

enter image description here

I want to make something like this.

Most of the vue examples don't help by putting specific values in 'labels:' beforehand. How can I get the value of the label in real time?

enter image description here

I tried putting time data into the store, but only the time when execution started is displayed.

enter image description here

Or like this...My head is a potato.Any help would be appreciated.

Upvotes: 0

Views: 725

Answers (1)

O-h-y-o
O-h-y-o

Reputation: 7

did you match label and data like this?

 chartData: {
   labels: [ 'January', 'February', 'March'],
   datasets: [
     {
       label: 'Data One',
       backgroundColor: '#f87979',
       data: [40, 20, 12]
     }
   ]
 },

Upvotes: 0

Related Questions