VueJS map chart component

Related tags

Charts vue-map-chart
Overview

Vue Map Chart

A Vue JS Component for displaying dynamic data on a world map.

preview

Credits

Installation

Install via npm using npm install vue-map-chart

import MapChart from 'vue-map-chart'

Usage

This component is most useful in creating a heat map for various countries. And will color countries differently based on a props passed.

The component requires a prop of countryData to be passed to it, which is a JS object formatted like so.

{
  "US": 100,
  "CA": 120,
  "GB": 400,
}

Where the key is a country's ISO 3166 Code and the value is a numerical value associated with it.

Example:

import MapChart from 'vue-map-chart'

<MapChart
  :countryData="{'US': 4, 'CA': 7, 'GB': 8, 'IE': 14, 'ES': 21}"
  highColor="#ff0000"
  lowColor="#aaaaaa"
  countryStrokeColor="#909090"
  defaultCountryFillColor="#dadada"
  />

API

Props Description Optional Type
countryData See Usage Section above for details no Object
lowColor Countries with lower values will be colored more strongly with this color yes String
highColor Countries with higher values will be colored more strongly with this color yes String
chromaScaleOn If True chromaScale of color, if false countries with value will be filled of the hightColor. By default is True yes Boolean
defaultCountryFillColor Countries with no data will default to this color yes String
countryStrokeColor The color of the border around countries yes String
legendBorderColor The color of the legend's border yes String
legendBorderRadius The radius of the legend's border yes Number
legendHeaderBackgroundColor The background color of the legend's header yes String
legendContentBackgroundColor The background color of the legend's content yes String
legendFontColorHeader The font color of the legend's header yes String
legendFontColorContent The font color of the legend's content yes String
legendBoxShadow If true, a box shadow is display yes Boolean
showLegend (WIP) If true, when you select a country a legend will appear on the screen WIP Boolean

Roadmap

  • Change Map type (World, Europe, single country, etc...) (WIP)
  • Click events
  • More customization
  • Export PDF/CSV
Owner
Aivin V. Solatorio
Data Scientist | Physicist | AI/ML
Aivin V. Solatorio
Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on.

About Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on https://www.coinbase.com/charts and is a Vue.js port of

okandas 2 Dec 19, 2021
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

jQuery Version ES6 Version Web Components Version Angular Version -- the most space-saving solution React Version Foreword First of all, thanks a lot

Xuebin Dong 221 Jan 23, 2022
A simple currency exchange chart built with Vue.js and Chart.js, using the ExchangeRate API.

Currency Exchange Chart A simple Vue.js app to display exchange rates in charts. Built With Vue - A progressive, incrementally-adoptable JavaScript fr

Lucas S. Policarpo 3 Apr 15, 2021
🍩 Doughnut chart component for Vue.js, originally created by Greg Willson

?? Vue Doughnut Chart Doughnut chart component for Vue.js, originally created by Greg Willson in codepen Demo https://mazipan.github.io/vue-doughnut-c

Irfan Maulana 32 Jan 19, 2022
A simple and easy-to-use Gantt chart component for Vue.js

vue-ganttastic A simple and easy-to-use Gantt chart component for Vue.js Homepage Homepage of the project Installation You can install and use Vue-Gan

Marko Z 131 Jan 17, 2022
A time series chart component using vue-chartjs and TypeScript

A time series chart component A time series chart component using vue-chartjs and TypeScript. Demo https://y-ota.github.io/vue-timeserieschart-compone

Yusuke Ota 12 Nov 25, 2021
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 4.6k Jan 22, 2022
A simple wrapper for Chart.

VueChart A simple wrapper for Chart. demo Try it out! dependencies Chart setup npm npm i @seregpie/vue-chart ES module Register the component globally

Sergej Sintschilin 24 Aug 9, 2021
⚡️ Vue components based on the JUI chart available in Vue.js

vue-graph A vue component library based on the JUI charts available in vuejs. Installation NPM npm install --save vue-graph Browser Just download dist

JUI Framework 115 Dec 28, 2021
Easily bind a chart to the data stored in your Vue.js components.

A plugin for adding charts to Vue Table of Contents Purpose Usage Performance Consideration Build Setup Purpose This plugin is designed to allow Vue.j

Brian Greig 199 Jan 2, 2022
Toast UI Chart for Vue

TOAST UI Chart for Vue This is Vue component wrapping TOAST UI Chart. ?? Table of Contents Collect statistics on the use of open source Install Using

NHN 54 Dec 1, 2021
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Remco Plasmeijer 253 Jan 15, 2022
Dedicated components used to implement Chart.js in Vue.js

Coreui Vue Chartjs library Description Dedicated components used to implement Chart.js in Vue.js. You can find the CoreUI Vue library documentation he

CoreUI 15 Oct 25, 2021
📊 Chart.js 3 for Vue 2 and Vue 3

This package is a rewrite of vue-chartjs for Chart.js 3, but written in Typescript with vue-demi and Vue Composition API.

Victor Garcia 175 Jan 20, 2022
A Beautiful Chart Using Draggable Grid For Vue.js

A Beautiful Chart Using Draggable Grid For Vue.js

medistream 13 Dec 14, 2021
A simple C2-like level (used in Cytoid) Chart Player.

Notice: The program will rename recently. C2Player-Web A simple C2-like level (used in Cytoid) Chart Player. No resources from Rayark Inc. / Cytoid Of

Teages 4 Jan 8, 2022
A simple C2-like level (used in Cytoid) Chart Player.

Cytusol Player A simple C2-like level (used in Cytoid) Chart Player. No resources from Rayark Inc. / Cytoid Official were used. And it is not Rayark I

Teages 4 Jan 8, 2022
Flexible tree chart using Canvas and Svg, powered by D3.js

Flexible tree chart using Canvas and Svg, powered by D3.js

Shen Shuntian 244 Jan 13, 2022
An interactive Vue and D3.js app that fetches data from a JSON file and displays data on a Chart

data_visualization This project is an interactive Vue and D3.js app that fetches

Rafa Huelin 0 Dec 20, 2021