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