# Floating Y axis, Power Charts

**URL:** <https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 3, 2024, 5:54pm UTC](https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784 "2024-10-03T17:54:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Rayburg](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alex\_Rayburg](https://forum.inductiveautomation.com/u/Alex_Rayburg)\
**Post date:** [October 3, 2024, 5:54pm UTC](https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784/1 "2024-10-03T17:54:51Z")

</div>

Does anyone know what property is causing my Y axis to float above my X axis? I would like the Y axis to extend down to the X axis like in a typical chart. Thanks!

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8427145495026995848c7cba9940a483ae4fb9e.png)

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [October 3, 2024, 7:06pm UTC](https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784/2 "2024-10-03T19:06:47Z")

</div>

That just seems to be the way the chart is designed. I played around a little with style props for a few things and did not find anything that really let me change that height.

You may be stuck with it since the plot area is comprised of svgs and it may not be easy to override some of the styles on those.

> **Inspected Chart**
>
> ```html
> <svg class="ia_chartContainer" width="1491" height="392" style="display: block;">
> <g></g>
> <g transform="translate(60,357)">
> <line x1="-60" y1="0.5" x2="1431" y2="0.5" class="ia_powerChartComponent __timeAxis__ axis " style="stroke: rgb(117, 122, 127);"></line>
> <g>
> <g class="ia_timeAxis ia_powerChartComponent __timeAxis__ values" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="fill: rgb(117, 122, 127); font-size: 10px;">
> <g class="tick" opacity="1" transform="translate(92.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:52</text>
> </g>
> <g class="tick" opacity="1" transform="translate(251.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:53</text>
> </g>
> <g class="tick" opacity="1" transform="translate(410.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:54</text>
> </g>
> <g class="tick" opacity="1" transform="translate(569.2429999999999,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:55</text>
> </g>
> <g class="tick" opacity="1" transform="translate(728.2429999999999,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:56</text>
> </g>
> <g class="tick" opacity="1" transform="translate(887.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:57</text>
> </g>
> <g class="tick" opacity="1" transform="translate(1046.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:58</text>
> </g>
> <g class="tick" opacity="1" transform="translate(1205.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:59</text>
> </g>
> <g class="tick" opacity="1" transform="translate(1364.243,0)">
> <line stroke="currentColor" y2="10" class="ia_powerChartComponent __timeAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" y="13" dy="0.71em" class="ia_powerChartComponent __timeAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">:00</text>
> </g>
> </g>
> </g>
> </g>
> <g transform="translate(60,0)">
> <g pointer-events="all">
> <rect x="0" y="0" width="1431" height="392" style="fill: rgb(0, 0, 0); opacity: 0; cursor: default;"></rect>
> <g transform="translate(-60,0)">
> <g class="chart-row ia_chartRow">
> <defs>
> <clipPath id="clip_1">
> <rect x="0" y="0" width="1431" height="347" style="stroke-opacity: 0;"></rect>
> </clipPath>
> </defs>
> <g transform="translate(0,0)">
> <g>
> <g transform="translate(60,0)" class="yaxis ia_powerChartComponent __yAxis__ values ia_yAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end" style="fill: rgb(117, 122, 127); font-size: 10px;">
> <g class="tick" opacity="1" transform="translate(0,342.5)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">0</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,308.8)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">10</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,275.1)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">20</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,241.39999999999998)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">30</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,207.7)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">40</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,174)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">50</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,140.3)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">60</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,106.60000000000001)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">70</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,72.89999999999999)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">80</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,39.199999999999996)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">90</text>
> </g>
> <g class="tick" opacity="1" transform="translate(0,5.5)">
> <line stroke="currentColor" x2="-5" class="ia_powerChartComponent __yAxis__ ticks" style="stroke: rgb(117, 122, 127);"></line>
> <text fill="currentColor" x="-8" dy="0.32em" class="ia_powerChartComponent __yAxis__ values" style="fill: rgb(117, 122, 127); font-size: 10px;">100</text>
> </g>
> <text class="ia_powerChartComponent __yAxis__ label yaxislabel" transform="rotate(-90)" y="-50" dy=".71em" text-anchor="end" style="fill: rgb(117, 122, 127); font-size: 10px;"></text>
> <line class="ia_powerChartComponent __yAxis__ axis" x1="0" y1="0" x2="0" y2="347" style="stroke: rgb(117, 122, 127);"></line>
> </g>
> </g>
> </g>
> <g transform="translate(60,0)">
> <g clip-path="url(#clip_1)">
> <g class="ia_lineChart"></g>
> </g>
> </g>
> <g transform="translate(60,0)"></g>
> <g transform="translate(60,0)"></g>
> <g transform="translate(60,0)" style="pointer-events: none;"></g>
> </g>
> </g>
> </g>
> </g>
> <g transform="translate(60,0)"></g>
> </svg>
> 
> ```

The main svg uses `ia_chartContainer` so you may be able to dive into the classes and do some custom cssing for this.

Unfortunately the timeseries chart also is the same way, but the XY Chart has both axis touching.

---

<div class="post-metadata">

**Author:** ![Alex\_Rayburg](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alex\_Rayburg](https://forum.inductiveautomation.com/u/Alex_Rayburg)\
**Post date:** [October 4, 2024, 12:44pm UTC](https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784/3 "2024-10-04T12:44:56Z")

</div>

Thank you for the response! Very interesting, I wonder what the motivation was to have the Y axis float.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [October 4, 2024, 1:02pm UTC](https://forum.inductiveautomation.com/t/floating-y-axis-power-charts/96784/4 "2024-10-04T13:02:27Z")

</div>

If you want some serious customization (One the power chart isn't great in my opinion) I would recommend @bmusson's chart.js module. It is fantastic to work with. We use it to plot thousands of datapoints and it works seamlessly. You have a good amount of customization and the documentation for how to do things with the charts are everywhere.

Obviously check with your customer and team to make sure non-Inductive and their partner modules are okay to use in their environments.

[Musson Industrial’s Embr-Charts Module - 3rd Party Modules - Inductive Automation Forum](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)