VueJS map chart component

Last update: Mar 25, 2021

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

GitHub

https://github.com/avsolatorio/vue-map-chart
You might also like...

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

Apr 25, 2022

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.

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.

Aug 13, 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

Apr 23, 2022

📊 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.

Aug 2, 2022

A Beautiful Chart Using Draggable Grid For Vue.js

A Beautiful Chart Using Draggable Grid For Vue.js

A Beautiful Chart Using Draggable Grid For Vue.js

Jul 11, 2022

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

Apr 11, 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

Apr 11, 2022

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

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

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

Jul 25, 2022

An interactive Vue and D3.js app that fetches data from a JSON file and displays data on a Chart

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

Mar 21, 2022
Related tags
Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on.
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

Feb 4, 2022
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

Aug 8, 2022
A simple currency exchange chart built with Vue.js and Chart.js, using the ExchangeRate API.
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

Jul 25, 2022
🍩 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

Jan 19, 2022
A simple and easy-to-use Gantt chart component for Vue.js
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

Aug 6, 2022
A time series chart component using vue-chartjs and TypeScript
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

Mar 31, 2022
📊 Vue.js wrapper for Chart.js
📊  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

Aug 12, 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

Aug 9, 2021
⚡️ Vue components based on the JUI chart available in Vue.js
⚡️ 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

Jun 22, 2022
Easily bind a chart to the data stored in your Vue.js components.
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

Jul 26, 2022