Hey Maurice,
To set margins above, below, left and right you need to change the ‘Layout’ properties, see a customized example (margin object) below:
Also have a look here.
{
"font": {
"family": "Agenda, sans-serif",
"size": 16,
"color": "#555"
},
"hovermode": "closest",
"showlegend": true,
"legend": {
"orientation": "h",
"y": 1.05,
"xanchor": "center",
"x": 0.5,
"itemsizing": "constant",
"borderwidth": 0,
"font": {
"family": "Agenda, sans-serif",
"size": 16,
"color": "black"
}
},
"margin": {
"l": 75,
"r": 20,
"b": 120,
"t": 10,
"pad": 10
},
"yaxis": {
"title": "Meetwaarden",
"gridcolor": "#d7d7d7",
"showgrid": true,
"fixedrange": false,
"automargin": true
},
"xaxis": {
"gridcolor": "#d7d7d7",
"showgrid": true,
"fixedrange": false,
"type": "date",
"tickmode": "auto",
"nticks": 25,
"ticklen": 5,
"tickangle": -45
}
}
Hi Tim,
Thanks for your research!
I followed up on that and it all seems a lot easier after all.
You can set the height as a property (FYI: it doesn't add a 'style’ in the layout-node of the widget):
A finding though: ‘percentage of width’ doesn't seem to work. There is no additional styling added, nor does adding styling by hand (in the inspector) have any effect.
I believe I can continue with 'pixels’.
Thanks for your time!
Hi Maurice,
First thing is to pass values to the “y” array and see what happens.
There is loads of documentation. The AnyChart has a nice demopage on https://charts102.mxapps.io/ It is very sleepy though...even ten minutes later… seems dead. Hm, other docs-page, https://docs.mendix.com/refguide/charts-any-cheat-sheet does not mention height at all, so it is probably not a plotly-setting.
Moving on to https://plotly.com/javascript/bar-charts/ it seems easy enough to set the height the way you tried: adding style=’height:1000px’ to the surrounding element. Mendix seems to control the size. I checked on https://mydemoversion8-sandbox.mxapps.io/p/charts, selected tab AnyCharts, inspected a table and found that the anychart element looks like this:
<div class="widget-charts widget-charts-full mx-name-anyChart5 " style="
height: 500px; width: 500px; padding-bottom: 250px;"><div class="js-plotly-plot"><div class="plot-container plotly"><div class="svg-container" style="position: relative; width: 500px; height: 500px;"><svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500.0000305175781" height="500.0000305175781" style="background: rgb(255, 255, 255);"><defs id="defs-17e0e0"><g class="clips"><clipPath id="clip17e0e0xyplot" class="plotclip"><rect width="340" height="320"></rect></clipPath><clipPath class="axesclip" id="clip17e0e0x"><rect x="80" y="0" width="340" height="500.0000305175781"></rect></clipPath><clipPath class="axesclip" id="clip17e0e0y"><rect x="0" y="100" width="500.0000305175781" height="320"></rect></clipPath><clipPath class="axesclip" id="clip17e0e0xy"><rect x="80" y="100" width="340" height="320"></rect></clipPath></g><g class="gradients"></g></defs><g class="bglayer"></g><g class="draglayer cursor-crosshair"><g class="xy"><rect class="nsewdrag drag" data-subplot="xy" x="80" y="100" width="340" height="320" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="nwdrag drag cursor-nw-resize" data-subplot="xy" x="60" y="80" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="nedrag drag cursor-ne-resize" data-subplot="xy" x="420" y="80" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="swdrag drag cursor-sw-resize" data-subplot="xy" x="60" y="420" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="sedrag drag cursor-se-resize" data-subplot="xy" x="420" y="420" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="ewdrag drag cursor-ew-resize" data-subplot="xy" x="114" y="420.5" width="272" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="wdrag drag cursor-w-resize" data-subplot="xy" x="80" y="420.5" width="34" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="edrag drag cursor-e-resize" data-subplot="xy" x="386" y="420.5" width="34" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="nsdrag drag cursor-ns-resize" data-subplot="xy" x="59.5" y="132" width="20" height="256" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="sdrag drag cursor-s-resize" data-subplot="xy" x="59.5" y="388" width="20" height="32" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect><rect class="ndrag drag cursor-n-resize" data-subplot="xy" x="59.5" y="100" width="20" height="32" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect></g></g><g class="layer-below"><g class="imagelayer"></g><g class="shapelayer"></g></g><g class="cartesianlayer"><g class="subplot xy"><g class="layer-subplot"><g class="shapelayer"></g><g class="imagelayer"></g></g><g class="gridlayer"><g class="x"><path class="xgrid crisp" transform="translate(100.75,0)" d="M0,100v320" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="xgrid crisp" transform="translate(175.38,0)" d="M0,100v320" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="xgrid crisp" transform="translate(250,0)" d="M0,100v320" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="xgrid crisp" transform="translate(324.63,0)" d="M0,100v320" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="xgrid crisp" transform="translate(399.25,0)" d="M0,100v320" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path></g><g class="y"><path class="ygrid crisp" transform="translate(0,400.25)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="ygrid crisp" transform="translate(0,344.15)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="ygrid crisp" transform="translate(0,288.05)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="ygrid crisp" transform="translate(0,231.95)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="ygrid crisp" transform="translate(0,175.85)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path><path class="ygrid crisp" transform="translate(0,119.75)" d="M80,0h340" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"></path></g></g><g class="zerolinelayer"></g><path class="xlines-below"></path><path class="ylines-below"></path><g class="overlines-below"></g><g class="xaxislayer-below"></g><g class="yaxislayer-below"></g><g class="overaxes-below"></g><g class="plot" transform="translate(80, 100)" clip-path="url('https://mydemoversion8-sandbox.mxapps.io/#clip17e0e0xyplot')"><g class="scatterlayer mlayer"><g class="trace scatter trace182928" style="stroke-miterlimit: 2; opacity: 1;"><g class="fills"></g><g class="errorbars"></g><g class="lines"><path class="js-line" d="M20.75,188.05L170,300.25L319.25,19.75" style="vector-effect: non-scaling-stroke; fill: none; stroke: rgb(31, 119, 180); stroke-opacity: 1; stroke-width: 2px; opacity: 1;"></path></g><g class="points"><path class="point" transform="translate(20.75,188.05)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"></path><path class="point" transform="translate(170,300.25)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"></path><path class="point" transform="translate(319.25,19.75)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"></path></g><g class="text"></g></g></g></g><g class="overplot"></g><path class="xlines-above crisp" d="M0,0" style="fill: none;"></path><path class="ylines-above crisp" d="M0,0" style="fill: none;"></path><g class="overlines-above"></g><g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="433" data-unformatted="1" data-math="N" transform="translate(100.75,0)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" data-unformatted="1.5" data-math="N" transform="translate(175.38,0)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1.5</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" data-unformatted="2" data-math="N" transform="translate(250,0)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" data-unformatted="2.5" data-math="N" transform="translate(324.63,0)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">2.5</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" data-unformatted="3" data-math="N" transform="translate(399.25,0)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">3</text></g></g><g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="1" data-math="N" transform="translate(0,400.25)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">1</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="2" data-math="N" transform="translate(0,344.15)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">2</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="3" data-math="N" transform="translate(0,288.05)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">3</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="4" data-math="N" transform="translate(0,231.95)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">4</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="5" data-math="N" transform="translate(0,175.85)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">5</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" data-unformatted="6" data-math="N" transform="translate(0,119.75)" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;">6</text></g></g><g class="overaxes-above"></g></g></g><g class="polarlayer"></g><g class="ternarylayer"></g><g class="geolayer"></g><g class="pielayer"></g><g class="sunburstlayer"></g><g class="glimages"></g></svg><div class="gl-container"></div><svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500.0000305175781" height="500.0000305175781"><defs id="topdefs-17e0e0"><g class="clips"></g></defs><g class="layer-above"><g class="imagelayer"></g><g class="shapelayer"></g></g><g class="infolayer"><g class="g-gtitle"></g><g class="g-xtitle"></g><g class="g-ytitle"></g></g><g class="menulayer"></g><g class="zoomlayer"></g></svg><div class="modebar-container" style="position: absolute; top: 0px; right: 0px; width: 100%;"></div><svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500.0000305175781" height="500.0000305175781"><g class="hoverlayer"></g></svg></div></div></div><div style="position: absolute; width: 0px; height: 0px; visibility: hidden; display: none;"></div><div class="widget-charts-tooltip"></div></div>
Lovely, all the undocumented features that are open for use. Never mind. To raise or lower the height you seem to change the height of one of its classes: widget-chart-full or mx-name-AnyChart-5