haiiaaa / chartjs-gauge

Gauge chart for Chart.js
53 stars 35 forks source link

Not starting at zero #18

Closed magarrent closed 3 years ago

magarrent commented 3 years ago

Hello mates!

See my issue here.

I've created this chart with this rang:

[10000, 12000, 14000, 16000, 18000]

The issue here is that the charts doesn't beggins with zero value, and appears like this:

image

I supose that the chart is beggining with 0, and that is the reason, but, how can I solve this?

Thx!

majazdl commented 3 years ago

Hello! This is my question too! I want to set starting value to different value (not 0). Thank you :)

haiiaaa commented 3 years ago

I have some code for this already that uses dataset.minValue

datasets: [{
    value: 12500,
    minValue: 10000, // instead of zero
    data: [12000, 14000, 16000, 18000], // does not include zero/minValue
    backgroundColor: ['green', 'yellow', 'orange', 'red'],
}]

Another option would be to use the first data point as zero/min-value with some flag

datasets: [{
    value: 12500,
    includesMin: true,
    data: [10000, 12000, 14000, 16000, 18000],
    backgroundColor: [null, 'green', 'yellow', 'orange', 'red'], // must include null unless removing minValue from data
}]

What do you think?

majazdl commented 3 years ago

Hello Good to see you :) Unfortunately, yours didn't work! This the code :

 datasets: [{
                        data: [162,234,306,378,450],
                        value: 100,
                        includesMin: true,
                        min: 90,
                        backgroundColor: [ 'red', 'orange' , 'yellow' , 'blue' , 'green'],
                        borderWidth: 2
                    }]

I tried 2 ways but still same.

haiiaaa commented 3 years ago

I have not pushed any code or published any new release yet.

majazdl commented 3 years ago

I'll waiting for new release sir It's important for me (starting value)

Best Regards

magarrent commented 3 years ago

I have some code for this already that uses dataset.minValue

datasets: [{
    value: 12500,
    minValue: 10000, // instead of zero
    data: [12000, 14000, 16000, 18000], // does not include zero/minValue
    backgroundColor: ['green', 'yellow', 'orange', 'red'],
}]

Another option would be to use the first data point as zero/min-value with some flag

datasets: [{
    value: 12500,
    includesMin: true,
    data: [10000, 12000, 14000, 16000, 18000],
    backgroundColor: [null, 'green', 'yellow', 'orange', 'red'], // must include null unless removing minValue from data
}]

What do you think?

Hi @haiiaaa !

I think minValue: 10000, // instead of zero it's more intuitive

majazdl commented 3 years ago

I have some code for this already that uses dataset.minValue

datasets: [{
    value: 12500,
    minValue: 10000, // instead of zero
    data: [12000, 14000, 16000, 18000], // does not include zero/minValue
    backgroundColor: ['green', 'yellow', 'orange', 'red'],
}]

Another option would be to use the first data point as zero/min-value with some flag

datasets: [{
    value: 12500,
    includesMin: true,
    data: [10000, 12000, 14000, 16000, 18000],
    backgroundColor: [null, 'green', 'yellow', 'orange', 'red'], // must include null unless removing minValue from data
}]

What do you think?

Hi @haiiaaa !

I think minValue: 10000, // instead of zero it's more intuitive

Is it work for you ?!

magarrent commented 3 years ago

@majazdl @haiiaaa is working on it, I supose that it's not available yet