Svelte Charts
The Svelte charts refer to a graphical representation of data.
Keep reading these simple yet flexible Javascript charting for
designers & developers.
Usage
In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:
import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import SvelteFC, { fcRoot } from "svelte-fusioncharts";
import line from "../../components/Charts/line.js";
import simple from "../../components/Charts/simple.js";
import bubble from "../../components/Charts/bubble.js";
import dognut from "../../components/Charts/dognut.js";
import pie from "../../components/Charts/pie.js";
import bar from "../../components/Charts/bar.js";
fcRoot(FusionCharts, Charts, FusionTheme);
After that, simply copy one of the code examples demonstrated below and include it in your page.
Examples
<script>
let lineChartConfig = {
type: "spline",
width: "100%",
height: "370",
renderAt: "chart-container",
dataSource: line
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Overview</h6>
<!-- Title -->
<h5 class="h3 mb-0">Total sales</h5>
</div>
<div class="chart">
<!-- line Chart -->
<div id="chart-container">
<SvelteFC {...lineChartConfig} />
</div>
</div>
</Card>
Bars Table Example
<script>
let simpleChartConfig = {
type: "column2d",
width: "100%",
height: "370",
dataFormat: "json",
dataSource: simple
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Performance</h6>
<!-- Title -->
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="chart">
<!-- 2D simple chart -->
<SvelteFC {...simpleChartConfig} />
</div>
</Card>
Points Table Example PRO
<script>
let dotsChartConfig = {
type: "bubble",
width: "100%",
height: "370",
dataFormat: "json",
dataSource: bubble
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Growth</h6>
<!-- Title -->
<h5 class="h3 mb-0">Sales value</h5>
</div>
<div class="chart">
<!-- bubble chart -->
<SvelteFC {...dotsChartConfig} />
</div>
</Card>
Doughnut Table Example PRO
<script>
dognutChartConfig = {
type: "doughnut2d",
width: "100%",
height: "370",
dataFormat: "json",
dataSource: dognut
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Users</h6>
<!-- Title -->
<h5 class="h3 mb-0">Audience overwiev</h5>
</div>
<div class="chart">
<!-- dognut chart -->
<SvelteFC {...dognutChartConfig} />
</div>
</Card>
Pie Table Example PRO
<script>
pieChartConfig = {
type: "pie2d",
width: "100%",
height: "370",
dataFormat: "json",
dataSource: pie
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Partners</h6>
<!-- Title -->
<h5 class="h3 mb-0">Affiliate traffic</h5>
</div>
<div class="chart">
<!-- pie chart -->
<SvelteFC {...pieChartConfig} />
</div>
</Card>
Bar stacked Table Example PRO
<script>
barChartConfig = {
type: "stackedcolumn2d",
width: "100%",
height: "370",
dataFormat: "json",
dataSource: bar
};
</script>
<Card>
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Overview</h6>
<!-- Title -->
<h5 class="h3 mb-0">Product comparison</h5>
</div>
<div class="chart">
<!-- pie chart -->
<SvelteFC {...barChartConfig} />
</div>
</Card>
Dark card with chart Example
<script>
import CandyTheme from "fusioncharts/themes/fusioncharts.theme.candy";
fcRoot(FusionCharts, Charts, FusionTheme, CandyTheme);
let lineChartConfig = {
type: "spline",
width: "100%",
height: "370",
renderAt: "chart-container",
dataSource: line,
monthdata: {
chart: {
showValues: "0",
theme: "candy"
}
}
};
</script>
<Card className="bg-candy">
<div slot="header">
<!-- Subtitle -->
<h6 class="surtitle">Overview</h6>
<!-- Title -->
<h5 class="h3 mb-0">Total sales</h5>
</div>
<div class="chart">
<!-- line Chart -->
<div id="chart-container">
<SvelteFC {...lineChartConfig} />
</div>
</div>
</Card>