Apex Charts - setting up a range starting below zero

3rd Party Modules
1

Can anyone help me to configure an Apex bar chart to have a range including values from below 0. At the moment my data labels display my range from -50 to 50 (the scale on the left). This is configured for series 0. Series 0 should now fill from -50 to 10, but instead it only fills from 0 to 10. Is there a property that I can use to indicate a range? Because of the current configuration, it also displays from 0 downward when a negative value is entered.

image
image1363×772 69.5 KB

2

The range column chart may be what you need:

3

Thank you, I will look at it again. I have been trying to provide the range like stated on the rangeBar demo, but my chart does not display anything. I suspect that the I am not providing the structure in the correct way.

4

Make sure to take note in the example I linked for the data array and chart object. The data array is an array of objects with an x and y value in each where the y value is an array of two values to define the range bar. For the chart object you need to set the type value to rangeBar.

5

image

6

This is how I tried implementing the example, but it is not working. Any suggestions?

7

data needs to be an array. You have it as an object. Each item in the data array would then be an object:

data [
    {
        x: 'Team A',
        y: [-50, 10]
    },
    {
        x: 'Team B',
        y: [-50, 20]
    },
    .
    .
    .
]

Edit: It looks like you were trying to use the y array to define all of your bars. You need a separate object for each bar in the data array. The y array values are the starting and ending value of the bar you want to display. So if you want the bar to start at -50, the first value in the y array for each object in the data array would need to be -50. See change to example above.

1 Like
8

Thank you for helping! I see where I went wrong. Cheers!
Solution:
image