amCharts - maTankLevel center chart column in div

[BobDay]

Hi - need a little help centering maTankLevel column in div...

When using the ma-tank-level component, its width is greater than the actual chart data path. I've perused the amCharts documentation, and can't find a way to either center the data in the chart div, or to get the actual pixel width of the data element (column, in this case).

I can hack it by placing the directive in a narrower div, but I can't dynamically size the containing div to the column size.

html: (not relevant commented out; css below)

<div id="09u098" class="table-block-top">
            <table class="first-table">
                <thead>
                    <tr class="tank-row">
                        <th class="tank-col caption">FILLING</th>
                        <th></th>
                        <th class="tank-col caption">READY</th>
                    </tr>
                </thead> -->
                <tbody>
                    <tr class="tank-block">
                        <td id="tank1" class="tank-box"><ma-tank-level id="tank1Tank" class="ma-tank" options="{angle: 12}"></ma-tank-level></td>
                        <td></td>
                        <td id="tank2" class="tank-box"><ma-tank-level id="tank2Tank" class="ma-tank" options="{angle: 12}"></ma-tank-level></td>
                        
                    </tr>
                   /* <!-- <tr class="tank-row">
                        <td class="button">
                           <ma-switch-img class="rotate-180" id="569459e8-da3b-48e6-b127-bb9081b1342e" style="position: relative; width: 44px; height: 44px;" default-src="/rest/v2/file-stores/default/icons/button-153683_640.png" src-false="/rest/v2/file-stores/default/icons/button-153683_640.png" src-true="/rest/v2/file-stores/default/icons/button-153683_640.png" point-xid="DP_t1_fill"></ma-switch-img> 
                        </td>
                        <td class="text-lbl">FILL</td>
                        <td class="button">
                            <ma-switch-img class="rotate-180" id="569459e8-da3b-48e6-b127-bb9081b1340a" style="position: relative; width: 44px; height: 44px;" default-src="/rest/v2/file-stores/default/icons/button-153683_640.png" src-false="/rest/v2/file-stores/default/icons/button-153683_640.png" src-true="/rest/v2/file-stores/default/icons/button-153683_640.png" point-xid="DP_t1_fill"></ma-switch-img>
                        </td>
                    </tr>
                    <tr class="tank-row">
                        <td class="button">
                            <ma-switch-img id="b5a74da4-554e-48e0-beb6-96f2bd6e4bc4" style="position: relative; height: 46px; width: 46px" toggle-on-click="true" default-src="/rest/v2/file-stores/default/icons/slim-green-led-on-th.png" point-xid="DP_t1_fill"></ma-switch-img>
                        </td>
                        <td class="text-lbl">SEL</td>
                        <td class="button">
                            <ma-switch-img id="b5a74da4-554e-48e0-beb6-96f2bd6e4bc4" style="position: relative; height: 46px; width: 46px" toggle-on-click="true" default-src="/rest/v2/file-stores/default/icons/slim-green-led-on-th.png" point-xid="DP_t1_fill">1</ma-switch-img>
                        </td>
                    </tr>
                    <tr class="tank-row">
                        <td class="text-val">Tank 1</td>
                        <td></td>
                        <td class="text-val">Tank 2</td>
                    </tr>
                </tbody>
            </table>
...
</div> --> */

relevant css:

.tank-block {
   position: relative;
   /*left: 0px;
   top: 0px;*/
   padding: 20px;
   width: 400px;
   height: 300px; 
}

.tank-box {
  position: relative;
  display: inline-block;
  width: 175px; 
  height: 250px;
  padding:0 0;
}

.ma-tank {
   position: relative;
   height: 100%;
   width: 275px;
}
.table-block-top {
    display: flex;
    justify-content: flex-start;
}
table {
    max-width: 25%;
    /*display: inline-block;*/
    border: none;
    text-align: center;
    border-collapse: collapse;
    font-size: 1em;
    margin: 0 30px;
}
table.first-table {
    padding-left:5px;
}
table td, table th {
    border: none;
}

table tbody td {
    text-align: center;
}
.tank-row {
    height: 75px;
}

[Jared Wiltshire]

@bullitbd I haven't dug too much into your code, but I think the crux of your issue is that you want the tank element to fit to the outside containing element?

Here's a minimal code example that demonstrates how to do this -

<div class="ma-designer-root" id="c00f126c-86e9-46a4-9282-a36865b9451a" style="width: 1366px; height: 768px; position: relative;">
    <div id="362df9d5-1eb8-4321-8a22-740ee3c3b903" style="position: absolute; width: 159px; height: 257px; left: 166px; top: 85px;">
        <ma-tank-level point-xid="voltage" max="5" style="width: calc(100% + 95px); height: 100%;"></ma-tank-level>
    </div>
</div>

Basically setting it to 100% height and width but making adding 95px to the width.

[Jared Wiltshire]

Actually here's a second method which is a little more straightforward

<div class="ma-designer-root" id="c00f126c-86e9-46a4-9282-a36865b9451a" style="width: 1366px; height: 768px; position: relative;">
    <div id="3facd1f4-cc6e-435f-a3f4-7641f450a1c8" style="position: absolute; width: 287px; height: 299px; left: 436px; top: 115px;">
        <ma-tank-level point-xid="voltage" max="5" style="width: 100%; height: 100%;" options="{marginRight: -74}"></ma-tank-level>
    </div>
</div>

[BobDay]

@jared-wiltshire said in amCharts - maTankLevel center chart column in div:

marginRight: -74

Aha! Thank you Jared! I was barking up another tree... sorry for all the code - TMI