vue-apexcharts icon indicating copy to clipboard operation
vue-apexcharts copied to clipboard

Apexcharts data loading after window resize

Open NazliTb opened this issue 2 years ago • 1 comments

Hello, My issue here is pretty similar to this one : #185 I have an apexcharts line in my code and the data doesn't initially load only after I resize the window (it doesn't load when i refresh the page as well) I am creating a new issue because the one I quoted above doesn't seem to be active anymore, I asked if anyone found a fix and got no answer so I'm hoping someone here can help me fix the issue. I am using Vue btw.

Here is my apexcharts:

`

                  <apexchart
                    type="line"
                    height="350"
                    :options="chartOptions"
                    :series="series"
                  ></apexchart>

`

And here's my chartOptions:

`chartOptions: {

    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
    },
    legend: {
      labels: {
        colors: "#FFFFFF",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    xaxis: {
      type: "datetime",
      categories: [],
      labels: {
        datetimeUTC: false,
        style: {
          colors: "#FFFFFF",
        },
      },
    },
    yaxis: [
      {
        title: {
          text: "Energie",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
      {
        opposite: true,
        title: {
          text: "Puissance",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
    ],
    tooltip: {
      enabled: false,
    },
    colors: ["#8AB4F7", "#8DCD7F"],

  },`

NazliTb avatar Jun 21 '22 10:06 NazliTb

Facing the same issue. Did you find any solution? @NazliTb

Sanan4li avatar Aug 28 '23 09:08 Sanan4li