charts-svelte

This library is use to render charts in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per the below defined format. when user click on any particular marker an event will execute and user will notify on which marker user has been clicked

Usage no npm install needed!

<script type="module">
  import chartsSvelte from 'https://cdn.skypack.dev/charts-svelte';
</script>

README

Documentation

This library is use to render charts in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per the below defined format. when user click on any particular marker an event will execute and user will notify on which marker user has been clicked

Installation

import google maps javacript in our public/index.html file

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

npm install charts-svelte

import Chart from "charts-svelte";

in component html we will use

<Chart bind:chartConfig bind:chartType />

chart config

chartConfig = {
    labels: ["Tokyo", "Mumbai", "Mexico City", "Shanghai", "Sao Paulo"],
    datasets: [{
      label: 'Population', // Name the series
      data: [22006299, 15834918, 14919501, 14797756, 14433147],
      backgroundColor: [ // Specify custom colors
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderWidth: 1 // Specify bar border width
    },
    {
      label: 'Second Label', 
      data: [120000, 15000000, 1454210, 240124, 3358452],
      backgroundColor: '#f443368c',
      borderColor: '#f443368c',
      borderWidth: 1,
      type: 'line',
      fill: false
    },
    {
      label: 'Third Label',
      data: [5024554, 2001424, 4454201, 4565420, 5659888],
      backgroundColor: '#2196f38c',
      borderColor: '#2196f38c',
      borderWidth: 1,
      type: 'line',
      fill: false
    }]
  };

Inputs

Input Type Required/Optional Uses
chartConfig object required chart config including data, styles, labels
chartType string required Type of chart like line, pie, bar, doughnut, polarArea, radar, bubble, scatter
isLabelShow boolean optional It's true in case we want to display labels othewise false

In Progress: Events on chart click