Charts
Chartjs charts Offical link Preview link
<!-- svelte code for display chartjs chart -->
<Radar data={radarChartData} options={radarChartOptions} width={778} height={400} />To use chartjs chart you have to add the following library:
npm i svelte-chartjs
Custom script added in chart.custom.js file for this chart display and your html code id
should be match with your custom script js
custom chart.custom.js file
import { SvelteComponentTyped } from "svelte";
import { Chart as ChartJS } from 'chart.js';
declare const __propDef: {
props: {
list?: string;
step?: string | number;
class?: string;
dataset?: object;
accept?: string;
acceptcharset?: string;
accesskey?: string;
action?: string;
allow?: string;
allowfullscreen?: boolean;
allowtransparency?: boolean;
allowpaymentrequest?: boolean;
alt?: string;
as?: string;
async?: boolean;
autocomplete?: string;
autofocus?: boolean;
autoplay?: boolean;
capture?: boolean | "environment" | "user";
cellpadding?: string | number;
cellspacing?: string | number;
charset?: string;
challenge?: string;
checked?: boolean;
cite?: string;
classid?: string;
cols?: number;
colspan?: number;
content?: string;
contenteditable?: boolean | "false" | "true";
innerHTML?: string;
textContent?: string;
contextmenu?: string;
controls?: boolean;
coords?: string;
crossorigin?: string;
currenttime?: number;
decoding?: "async" | "sync" | "auto";
data: import("chart.js").ChartData<"radar", number[], unknown>;
datetime?: string;
default?: boolean;
defaultmuted?: boolean;
defaultplaybackrate?: number;
defer?: boolean;
dir?: string;
dirname?: string;
disabled?: boolean;
download?: any;
draggable?: boolean | "false" | "true";
enctype?: string;
enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
for?: string;
form?: string;
formaction?: string;
formenctype?: string;
formmethod?: string;
formnovalidate?: boolean;
formtarget?: string;
frameborder?: string | number;
headers?: string;
height?: string | number;
hidden?: boolean;
high?: number;
href?: string;
hreflang?: string;
htmlfor?: string;
httpequiv?: string;
id?: string;
inputmode?: string;
integrity?: string;
is?: string;
ismap?: boolean;
keyparams?: string;
keytype?: string;
kind?: string;
label?: string;
lang?: string;
loading?: string;
loop?: boolean;
low?: number;
manifest?: string;
marginheight?: number;
marginwidth?: number;
max?: string | number;
maxlength?: number;
media?: string;
mediagroup?: string;
method?: string;
min?: string | number;
minlength?: number;
multiple?: boolean;
muted?: boolean;
name?: string;
nonce?: string;
novalidate?: boolean;
open?: boolean;
optimum?: number;
part?: string;
pattern?: string;
placeholder?: string;
playsinline?: boolean;
ping?: string;
poster?: string;
preload?: string;
radiogroup?: string;
readonly?: boolean;
referrerpolicy?: string;
rel?: string;
required?: boolean;
reversed?: boolean;
role?: string;
rows?: number;
rowspan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
slot?: string;
span?: number;
spellcheck?: boolean | "false" | "true";
src?: string;
srcdoc?: string;
srclang?: string;
srcset?: string;
start?: number;
style?: string;
summary?: string;
tabindex?: number;
target?: string;
title?: string;
translate?: "" | "yes" | "no";
usemap?: string;
value?: any;
volume?: number;
width?: string | number;
wmode?: string;
wrap?: string;
about?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
resource?: string;
typeof?: string;
vocab?: string;
autocapitalize?: string;
autocorrect?: string;
autosave?: string;
color?: string;
controlslist?: "nodownload" | "nofullscreen" | "noplaybackrate" | "noremoteplayback";
inert?: boolean;
itemprop?: string;
itemscope?: boolean;
itemtype?: string;
itemid?: string;
itemref?: string;
results?: number;
security?: string;
unselectable?: boolean;
options?: import("chart.js/types/utils")._DeepPartialObject & import("chart.js").ElementChartOptions<"radar"> & import("chart.js").PluginChartOptions<"radar"> & import("chart.js").DatasetChartOptions<"radar"> & import("chart.js").ScaleChartOptions<"radar"> & import("chart.js").LineControllerChartOptions>;
plugins?: import("chart.js").Plugin<"radar", import("chart.js/types/basic").AnyObject>[];
'aria-activedescendant'?: string;
'aria-atomic'?: boolean | "false" | "true";
'aria-autocomplete'?: "none" | "inline" | "list" | "both";
'aria-busy'?: boolean | "false" | "true";
'aria-checked'?: boolean | "false" | "true" | "mixed";
'aria-colcount'?: number;
'aria-colindex'?: number;
'aria-colspan'?: number;
'aria-controls'?: string;
'aria-current'?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time";
'aria-describedby'?: string;
'aria-details'?: string;
'aria-disabled'?: boolean | "false" | "true";
'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup";
'aria-errormessage'?: string;
'aria-expanded'?: boolean | "false" | "true";
'aria-flowto'?: string;
'aria-grabbed'?: boolean | "false" | "true";
'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
'aria-hidden'?: boolean | "false" | "true";
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
'aria-keyshortcuts'?: string;
'aria-label'?: string;
'aria-labelledby'?: string;
'aria-level'?: number;
'aria-live'?: "off" | "assertive" | "polite";
'aria-modal'?: boolean | "false" | "true";
'aria-multiline'?: boolean | "false" | "true";
'aria-multiselectable'?: boolean | "false" | "true";
'aria-orientation'?: "horizontal" | "vertical";
'aria-owns'?: string;
'aria-placeholder'?: string;
'aria-posinset'?: number;
'aria-pressed'?: boolean | "false" | "true" | "mixed";
'aria-readonly'?: boolean | "false" | "true";
'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals";
'aria-required'?: boolean | "false" | "true";
'aria-roledescription'?: string;
'aria-rowcount'?: number;
'aria-rowindex'?: number;
'aria-rowspan'?: number;
'aria-selected'?: boolean | "false" | "true";
'aria-setsize'?: number;
'aria-sort'?: "none" | "ascending" | "descending" | "other";
'aria-valuemax'?: number;
'aria-valuemin'?: number;
'aria-valuenow'?: number;
'aria-valuetext'?: string;
updateMode?: "none" | "resize" | "reset" | "hide" | "show" | "normal" | "active";
chart?: ChartJS<"radar", number[], unknown>;
};
events: {
[evt: string]: CustomEvent;
};
slots: {};
};
export declare type RadarProps = typeof __propDef.props;
export declare type RadarEvents = typeof __propDef.events;
export declare type RadarSlots = typeof __propDef.slots;
export default class Radar extends SvelteComponentTyped {
}
export {};
//# sourceMappingURL=Radar.svelte.d.ts.map Apex charts Offical link Preview link
<!-- svelte code for display apex chart -->
<div id="basic-apex">
<div use:chart={apexAreaChart} / >
</div>To use apex chart you have to add the following script files
npm i svelte-apexcharts
Custom script added in chart-custom.js file for this chart display and your html code id
should be match with your custom script js
custom chart-custom.js file
// basic area chart
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],
},
};