Comments (6)
can you provide a standalone example that I can use.
from chartjs-chart-geo.
Will this work? This just creates an empty bubbleMap:
createEmptyChart() { // we must destroy the existing chart before making a new one if(this.chart) { this.chart.destroy(); this.chart = null as any; } this.chart = new Chart("MyChart", { type: 'bubbleMap', data: { datasets: [{ outline: this.states, outlineBackgroundColor: '#EAEAEA', outlineBorderColor: 'black', outlineBorderWidth: 1, showOutline: true, borderWidth: 1, borderColor: 'black', backgroundColor: '#990000', data: [], }] }, options: { plugins: { legend: { display: false }, }, scales: { projection: { axis: 'x', projection: 'albersUsa', }, size: { axis: 'x', display: false } } } }); }
from chartjs-chart-geo.
I cannot reproduce it https://codepen.io/sgratzl/pen/BaedJmz?editors=0010
from chartjs-chart-geo.
My application is an Angular application using Typescript. As such, I'm not referencing the HTML element like you are. In your Codepen, I see this:
let elem = document.getElementById("canvas");
And you pass that into the new Chart call:
const createChart = (elem) => { return new Chart(elem,
In my application, I am simply referencing the HTML element by its id in the call to new Chart:
this.chart = new Chart("MyChart",
and in my HTML:
I tried to set up a Codepen to demonstrate but was unable to get the TS and Angular stuff to work. Could the issue be that I am referencing the HTML element by id instead of getting the HTML element like you do?
And if that is the issue, why do I only encounter the error with "bubbleMap" and not with "choropleth"?
from chartjs-chart-geo.
Actually, I don't think that's it because even doing it this way:
from chartjs-chart-geo.
By moving the elem variable out and making it a component variable, it appears to be working now. Thanks for the assistance.
from chartjs-chart-geo.
Related Issues (20)
- TS Error on import of library HOT 1
- How to have tooltip when no legend is shown HOT 2
- Choropleth doesn't appear HOT 2
- Large values get cut off in choropleth chart HOT 1
- Can't understand how to use in JSX HOT 2
- How to use bubble map with longitude and latitude HOT 4
- Samples on Readme doesn't work, 404 for https://github.com/sgratzl/chartjs-chart-geo/tree/main/samples HOT 3
- Fix the npm example HOT 1
- Map of Europe HOT 1
- Pacific Centered World Map. HOT 1
- Small countries as circles in choropleth map? HOT 4
- Canvas size is greater than map width? HOT 1
- Any plan for support chart v4~ HOT 1
- How to do a bubbleMap using the world HOT 3
- Broken links HOT 1
- Support for server-side map rendering using node-canvas
- My map from Brazil doesn't appears on screen HOT 3
- Bubble Map - Datalabels are no longer working. HOT 1
- How can I add labels to countries with values > 0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartjs-chart-geo.