sgratzl / chartjs-chart-geo

Chart.js Choropleth and Bubble Maps
https://www.sgratzl.com/chartjs-chart-geo/
MIT License
350 stars 40 forks source link

Issues with colorscale #237

Open Jrowe2014 opened 3 months ago

Jrowe2014 commented 3 months ago

Hello, new to javascript, and having issues getting this chart's color scale working. I had random numbers in the values prior, set to zero just for testing right now.

Attached a photo of what it looks like right now, and I understand with the values set to zero it is correct, but with random numbers it still looked the same. The values on the hover were reporting correctly, just the color scale was just blue. Having trouble even moving the legend or changing it so 0 is grey.

I think i have read every post on this subject, might just be a knowledge gap if you have time to answer.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://unpkg.com/chartjs-chart-geo@3.5.2/build/index.umd.min.js"></script>
<script>
    const counties_file = 'static/counties-10m.json'

    fetch(counties_file).then((result) => result.json()).then((datapoint) => {
        const counties = ChartGeo.topojson.feature(datapoint, datapoint.objects.counties).features;

        const data = {
            labels: counties.map(county => county.properties.name),
            datasets: [{
                label: 'Counties',
                data: counties.map(county => ({
                    feature: county, value: 0
                })),
            }]
        };

        const config = {
            type: 'choropleth',
            data,
            options: {
                legend: {
                    display: false
                },
                scale: {
                    projection: 'albersUsa',
                    colorScale: {
                    }
                },
            }
        };
        const mapChart = new Chart(
            document.getElementById('mapChart').getContext("2d"),
            config
        );

    })

</script>
<canvas id="mapChart"></canvas>

image

sgratzl commented 2 months ago

I'm confused. the color scale shown is a linear scale from -1 to +1 so some kind of blue is 0 that all the map is showing.

can you elaborate what you are expecting?

Jrowe2014 commented 1 month ago

image Here in this screen shot, stonewall is .8 , I assumed it would be darker then some of the smaller numbers around it? That is why im thinking im missing something,

Cheers!

sgratzl commented 1 month ago

but in your example from the beginning of this issue you are setting everything to 0

feature: county, value: 0 so where is now 0.882 coming from?

Jrowe2014 commented 1 month ago

It was just another test to see what would happen, sorry for the confusion. Right now i have a random number 0-1.

const data = { labels: counties.map(county => county.properties.name), datasets: [{ label: 'Counties', data: counties.map(county => ({ feature: county, value: Math.random() })), }] };

laoneo commented 3 days ago

I have a similar issue while one country has 56 and all the other 0 image

Scale is from 1 to -1. Any way to change this or is it a bug?