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!
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
<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.
Thank you for the response! Very interesting, I wonder what the motivation was to have the Y axis float.
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
1 Like