galkatz373/svelte-apexcharts

Svelte wrapper for ApexCharts

svelte-apexcharts's Issues

Use Apex Methods

How I can use Apex methods (https://apexcharts.com/docs/methods/#dataURI) using this svelte wrapper? Any idea?

Thanks!

Nestjs Svelte - Cannot read properties of undefined (reading 'document')

Hi,
I've created a Nestjs project with Svelte template. I'm trying to use this package but it gives me this error:

[Nest] 5984 - 10/26/2021, 2:34:09 PM ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'document')
TypeError: Cannot read properties of undefined (reading 'document')
at /home/user/project/node_modules/svelte-apexcharts/dist/index.js:12:397801
at /home/user/project/node_modules/svelte-apexcharts/dist/index.js:2:66
at Object. (/home/user/project/node_modules/svelte-apexcharts/dist/index.js:5:2)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/home/user/proj

Here's my codes:

// Test-sveltapex.svelte
<script>
    import { chart } from "svelte-apexcharts";
    let options = {
      chart: {type: "bar",},
      series: [{name: "sales", data: [30, 40, 35, 50, 49, 60, 70, 91, 125],},],
      xaxis: {categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],},
    };
  </script>
  <div use:chart={options} />

// the controller
...
  @Get()
  @Render('Test-sveltapex')
  async test():Promise<any> {
    return {};
  }

I'm new to js and I have no idea what's the problem.

Window is not defined

While trying to set up chart from the README.md, I have received an error:
ReferenceError: window is not defined
I've tried all of ideas here: https://kit.svelte.dev/faq#integrations
I had same problem with d3, but I resolved it with adding onMount and typeof window, here is not working

`<script>
import { onMount } from 'svelte';
import { chart } from "svelte-apexcharts";

onMount(() => {
if (typeof window !== "undefined") {
let options = {
chart: {
type: "bar",
},
series: [
{
name: "sales",
data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
},
],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
},
};
}
});
</script>`

`

`import adapter from '@sveltejs/adapter-static';
const dev = process.env.NODE_ENV === 'development';

It may be the problem with my config.svelte.js, so I am pasting it here as well. I am pretty new to Svelte and webdesign, so I may made an mistake there
`
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit:
{
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: null,
precompress: false
}),
trailingSlash: 'always',
paths: {
base: dev ? '' : '/app',
},
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
},
vite: {
resolve: {
dedupe: ['@fullcalendar/common'],
browser: true,
},
optimizeDeps: {
include:['@fullcalendar/common']
}
}
},
paths: {
base: 'app/'
},
ssr:false,
};

export default config;`

Thank you in advance

Bundle size is too big > 400kb gzipped

Import cost from this module seems to be larger than 400kb gzipped and production build size for vendor.js is large as well. Are there any way to reduce the bundle size for this package?

Issue rending back-end data

Hey! so im trying to render a line-chart but series with an array from backend are not rendering

I tried to set options on my onMount but this won't work either.

`<script>
import { onMount } from "svelte";
import { chart } from "svelte-apexcharts";
import ReportService from "./ReportService";

let data;
let options;
let electricList = [];

onMount(async () => {
    try {
        data = await ReportService.getMonthlyConsumption();
        loadElectricArray(data);
    } catch (error) {
        console.log(error);
    }
});

const loadElectricArray = (data) => {
    electricList = data.monthlyConsumption.map((x) => x.count);
    return electricList;
}     

options = {
    chart: {
        height: 450,
        width: 750,
        type: "line",
        shadow: {
            enabled: true,
            color: COLOR_GRAY_500,
            top: 18,
            left: 7,
            blur: 10,
            opacity: 1,
        },
        toolbar: {
            show: false,
        },
    },
    colors: [COLOR_BLUE, COLOR_TEAL],
    dataLabels: {
        enabled: true,
    },
    stroke: {
        curve: "smooth",
        width: 3,
    },
    series: [
        {
            data: electricList,
        },
        {
            data: [1,2,3,4,5,6,7,8,9],
        },
    ],
    grid: {
        borderColor: COLOR_GRAY_200,
        row: {
            colors: [COLOR_GRAY_200, "transparent"],
            opacity: 0.5,
        },
    },
    markers: {
        size: 4,
    },
    xaxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        axisBorder: {
            show: true,
            color: COLOR_GRAY_300,
            height: 1,
            width: "100%",
            offsetX: 0,
            offsetY: -1,
        },
        axisTicks: {
            show: true,
            borderType: "solid",
            color: COLOR_GRAY_300,
            height: 6,
            offsetX: 0,
            offsetY: 0,
        },
    },
    yaxis: {
        min: 5,
        max: 20,
    },
};

</script>

`

This is my code at the moment. My array "electricList" is returning an array filled with ints but that serie is not rendering. Why?

Cannot reposition Chart

It is just impossible to reposition it!!!!

Chart doesn't clear between component use

I have a candlestick chart component. I'm selecting a stock from a list, which passes a prop containing the ticker and and a prop containing the chart data points. Working well. The problem is when I pass new props to the component, the chart add the data points to the first. Every time I click on a new stock, the chart adds the data points again. The data points do not clear between component usage.

I've tried clearing the data using both the onDestroy and beforeUpdate lifecycle functions, to no effect.

Is there a way to clear data?

Hi !! just what I was looking for ... but have some errors ... any ideas? "Error when evaluating SSR"

8:49:33 PM [vite] Error when evaluating SSR module /node_modules/svelte-apexcharts/src/index.js:
ReferenceError: window is not defined
    at Object.<anonymous> (xxx\app\node_modules\apexcharts\dist\apexcharts.common.js:6:345884)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (xxx\app\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
    at ssrImport (xxx\app\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
    at eval (/node_modules/svelte-apexcharts/src/index.js:3:31)