# Apex Charts - setting up a range starting below zero

**URL:** <https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056>\
**Category:** 3rd Party Modules\
**Created:** [February 20, 2023, 7:11am UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056 "2023-02-20T07:11:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skapi3](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Skapi3](https://forum.inductiveautomation.com/u/Skapi3)\
**Post date:** [February 20, 2023, 7:11am UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/1 "2023-02-20T07:11:36Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f329775a53d3be3ab2f0a33dbf7cc2fd131f88ef.png)

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [February 20, 2023, 4:39pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/2 "2023-02-20T16:39:27Z")

</div>

The range column chart may be what you need:

> **[JavaScript Range Column Chart (Floating Columns) – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/column-charts/range-column-chart/)**
>
> View the demo of a range column chart created with ApexCharts rangeBar chart-type which can have a start and end values.

---

<div class="post-metadata">

**Author:** ![Skapi3](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Skapi3](https://forum.inductiveautomation.com/u/Skapi3)\
**Post date:** [February 20, 2023, 10:31pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/3 "2023-02-20T22:31:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [February 20, 2023, 10:51pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/4 "2023-02-20T22:51:03Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![Skapi3](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Skapi3](https://forum.inductiveautomation.com/u/Skapi3)\
**Post date:** [February 20, 2023, 10:52pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/5 "2023-02-20T22:52:29Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/e/febeefc662175452771c74f7e652f30ace89c4fc.png)

---

<div class="post-metadata">

**Author:** ![Skapi3](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Skapi3](https://forum.inductiveautomation.com/u/Skapi3)\
**Post date:** [February 20, 2023, 10:56pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/6 "2023-02-20T22:56:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [February 20, 2023, 10:59pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/7 "2023-02-20T22:59:52Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Skapi3](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Skapi3](https://forum.inductiveautomation.com/u/Skapi3)\
**Post date:** [February 20, 2023, 11:05pm UTC](https://forum.inductiveautomation.com/t/apex-charts-setting-up-a-range-starting-below-zero/70056/8 "2023-02-20T23:05:13Z")

</div>

Thank you for helping! I see where I went wrong. Cheers!  
Solution:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56d9385cf66d18870b397465a36813f115a4c4d1.png)