Create a Chart in Svelte

Froala Charts is a JavaScript charting library that lets you create interactive charts, gauges, maps, and dashboards using JavaScript. We have built a simple and lightweight Svelte directive, which provides bindings for svelte-froalacharts and lets you add JavaScript charts in your Svelte application or project without any hassle.

On this page, you'll see how to install Froala Charts and render a chart using the svelte-froalacharts directives.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager. Svelte requires Node.js version 10.9.0 or later. To download and install Node.js, please visit nodejs.org.

You need to set up a Svelte project before proceeding. To set up a project follow these steps.

Open a new terminal and execute the following command.

  npx degit sveltejs/template my-first-svelte-project

The above command creates a new project folder named my-first-svelte-project, and downloads the svelte default project template into that folder. Before running the project, we need to make sure that all needed development dependencies are being installed.

  cd my-first-svelte-project
  npm install

Open the terminal and enter npm run dev to serve your app on localhost:5000.

Installation and Including Dependencies

To install froalacharts and the svelte-froalacharts directive via npm follow the steps below:

Install svelte-froalacharts and froalacharts libraries with the following command:

npm install svelte-froalacharts froalacharts --save

After installing the FroalaCharts components, you can replace the code in App.svelte file with the code shown in the steps below to create your first chart. Import all the required dependencies in the <script> tag to get started.

<script>
//Import the Froalacharts library
import FroalaCharts from "froalacharts";

//Import the theme as froala
import FroalaTheme from "froalacharts/themes/froalacharts.theme.froala";

//Import the Svelte component
import SvelteFC, { fcRoot } from "svelte-froalacharts";

// Always set FroalaCharts as the first parameter
fcRoot(FroalaCharts, FroalaTheme); 
</script>

Preparing the Data

Let's create a chart showing a "Comparison of Quarterly Revenue".

Since we are plotting a single dataset, create a column chart with 'Quarter' as data labels along the x-axis and 'Revenues (In USD)' as data values along y-axis.

Froala Charts accepts the data in JSON format. Include the data object in the <script> tag of the App.svelte file. So the above data in the tabular form will look as follows:

const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

Configure your Chart

Next, work on the styling, positioning and giving your chart a context.

// Create a JSON object to store the chart configurations
const chartConfig = {
  //Specify the chart type
  type: "column",
  //Set the container object
  renderAt: "ft",
  //Specify chart dimensions
  width: "800",
  height: "500",
  //Set the type of data
  dataSource: {
    chart: {
      //Set the theme for your chart
      theme: "froala",
      //Set the chart caption
      caption: "Comparison of Quarterly Revenue",
      //Set the x-axis name
      xAxisname: "Quarter",
      //Set the y-axis name
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
      {
        category: [
          {
            label: "Q1",
          },
          {
            label: "Q2",
          },
          {
            label: "Q3",
          },
          {
            label: "Q4",
          }
        ]
      }
    ],
    dataset: chartData
  }
};

Render the chart

Finally, get ready to render your first chart. Follow the steps mentioned below:

Step 1: In App.svelte include the necessary files and import the froalacharts dependency.

Store the chart configurations in a JSON object.

The consolidated code is shown below:

<script>
//Step 1 : import dependecies
import FroalaCharts from "froalacharts";
import FroalaTheme from "froalacharts/themes/froalacharts.theme.froala";
import SvelteFC, { fcRoot } from "svelte-froalacharts";
// Always set FroalaCharts as the first parameter
fcRoot(FroalaCharts, FroalaTheme);

//Step 2: preparing the chart Data
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

//Step 3 : Create your configuration object
const chartConfig = {
  type: "column",
  renderAt: "ft",
  width: "800",
  height: "500",
  dataSource:
  {
    chart:
    {
      theme: "froala",
      caption: "Comparison of Quarterly Revenue",
      xAxisname: "Quarter",
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
    {
      category: [
      {
        label: "Q1",
      },
      {
        label: "Q2",
      },
      {
        label: "Q3",
      },
      {
        label: "Q4",
      }]
    }],
    dataset: chartData
  }
}; 
</script>

<SvelteFC {...chartConfigs}/>

Step 2: Export the app from main.js.

import App from "./App.svelte";
  var app = new App({
    target: document.body
  });
  export default app;

Step 3: Run npm run dev command in the terminal. Once the build is successful, open the localhost file to see your chart.

See your chart

You should be able to see the chart as shown below.

Next Steps

Explore the List of Charts.

Dive into the API documentation.

Learn about other Concepts.