Anychart height

0
Hi, I use an Anychart with date-values on the x-axis. See image. For some reason, the dimension remain stuck to the available width (6-column layoutgrid). As you can see, there's too much space above and below the bar. I just can't manage to set the height of the plot. I tried to set the height attribute, but without effect. I also tried to set the height of the surrounding container, with no effect either. In Configuration, I set ‘responsive’ to false. Anyone who knows how to influence the height? Thanks for help!     For what it's worth, the data value is as follows: [   {     "type": "scatter",     "mode": "lines+markers",     "marker": {       "color": "rgb(23,136,53)",       "symbol": "square",       "size": 25     },     "line": {       "color": "rgba(23,136,53,0.7)",       "width": 25     },     "x": [       "2021-02-01",       "2021-02-24",       "2021-03-24"     ],     "y": [       "",       "",       ""     ]   } ]
asked
3 answers
1

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!

 

answered
0

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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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 

 

answered
0

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
  }
}

 

answered