apexcharts / apexgrid Goto Github PK

just installed in in vue 3 as per the docs , has so many errors :

Firstly , you say that a compiler option must be added , isCustomElement: (tag) => tag.includes('-'),

This breaks all vue-router components - well done for actually testing you component in any real world example sheez

ok so i just changed that to isCustomElement: (tag) => tag.includes('-') && tag.includes('apex'),

next errors

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at ThemingController.adoptStyles (theming-controller.ts:65:14)
    at ThemingController.hostConnected (theming-controller.ts:49:10)
    at reactive-element.ts:1044:55
    at Array.forEach (<anonymous>)
    at ApexGrid2.connectedCallback (reactive-element.ts:1044:25)
    at ApexGrid2.connectedCallback (lit-element.ts:189:11)
    at insert (runtime-dom.esm-bundler.js:10:12)
    at mountElement (runtime-core.esm-bundler.js:5326:5)
    at processElement (runtime-core.esm-bundler.js:5236:7)

and

Uncaught (in promise) DOMException: Failed to execute 'structuredClone' on 'Window': [object Array] could not be cloned.
    at ApexGrid2.dataChanged (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:46385:22)
    at protoOrDescriptor.willUpdate (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:45138:24)
    at protoOrDescriptor.willUpdate (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:45132:18)
    at ApexGrid2.performUpdate (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:695:14)
    at ApexGrid2.scheduleUpdate (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:647:17)
    at ApexGrid2.__enqueueUpdate (http://127.0.0.1:5173/node_modules/.vite/deps/apex-grid_define.js?v=0c828c52:623:25)

i did add an import one of the styles , which also should be mentioned upfront , yet you have to go to the theming page to discover its a requirement.

import 'igniteui-webcomponents/themes/dark/bootstrap.css'

anyway .. it helped nothing.

For goodness sake , take down your webpages presenting this as some usable module while it is in this state. Or update your docs to tell us how to make it work .. while you at it , why dont you include some working examples , using the component like an end user ( unlike the one on your current page that uses some code from within your modules not applicable to end users)

Hi,
I am using a bubble chart to plot risk (impact, likelihood and velocity) items. Traditionally the background would have red cells at the top right, green cells at the bottom left and yellow cells in the middle ish.

I have tried using apexcharts-canvas and an image but the main challenge is the image should just be on the grid and using position-x and y etc get it close but the grid size changes when no data and with data (the dataset names are shown).

I've also tried using the grid row and column color which seems the most accurate but cant get it to individually color each cell.

Does anyone know how to color each cell differently in the grid ??

Many thanks

Nigel

Create a README.md similar to the charts one: https://github.com/apexcharts/apexcharts.js/blob/main/README.md

Also add a badge for the npm package version.