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>