Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with colorscale #237

Open
Jrowe2014 opened this issue Aug 1, 2024 · 5 comments
Open

Issues with colorscale #237

Jrowe2014 opened this issue Aug 1, 2024 · 5 comments
Labels
question Further information is requested

Comments

@Jrowe2014
Copy link

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/[email protected]/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

@Jrowe2014 Jrowe2014 added the question Further information is requested label Aug 1, 2024
@sgratzl
Copy link
Owner

sgratzl commented Sep 8, 2024

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
Copy link
Author

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
Copy link
Owner

sgratzl commented Oct 18, 2024

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
Copy link
Author

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
Copy link

laoneo commented Nov 24, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants