Axis labelAngle will create weird margin between chart and chart title

Axis labelAngle will create weird margin between chart and chart title

Posted by: Yifan_Zhang on 27 September 2023, 6:20 pm EST

• 

  Yifan_Zhang

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 September 2023, 6:20 pm EST

  See the demo here, the y axis has a labelAngle of -45: https://jscodemine.grapecity.com/sample/kAb4rvQ9T0CwsQiPBE2inQ/
  
  There is an extra blank space between the chart and chart title compared to when the labelAngle is 0. The axis labels amount seems to be greatly reduced as well. Try with other angle values like 45 or -60 would still see a similar issue.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2023, 8:18 pm EST

  Hi Yifan,

  This seems like an unexpected behavior for the flexChart control, so we have forwarded this issue to the dev team for further investigation with internal tracking id - WJM-31131.
  
  We will update you on its progress as soon as we have some updates from the dev team.

  Meanwhile, to avoid this issue, you can set the ‘plotMargin’ property of the flexchart and adjust the margin as per your project requirements. You can refer to the following updated sample for the same - https://jscodemine.grapecity.com/share/RM9u0Q7fr0m3NmpfRZZANQ/

  Regards,
  
  Vivek Pannu

• 

  Yifan_Zhang

  • Post Options:
  • Link
    Copy

  Posted 29 September 2023, 2:54 am EST

  Hi Vivek,

  Thanks for the reply. However, the temporary workaround may not be working for us as the font for our chart title could be customized anytime by the user, and a fixed plot margin will not adapt to that.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 October 2023, 8:27 pm EST

  Hi Yifan,

  In that case, you can rotate the axis labels through CSS, instead of setting the labelAngle property. Please refer to the following CSS configuration -

  .high-value {
      fill: darkgreen;
      font-weight: bold;
      transform: rotate(-45deg);
      transform-origin: right center;
      transform-box: fill-box;
  }
  
  .low-value {
      fill: darkred;
      transform: rotate(-45deg);
      transform-origin: right center;
      transform-box: fill-box;
  }
  
  .wj-axis-y .wj-label {
      transform: rotate(-45deg);
      transform-origin: right center;
      transform-box: fill-box;
  }

  The above CSS is configured according to the following sample - https://jscodemine.grapecity.com/share/3-F6baFcv0WlArriiiCAtA/
  
  You can follow a similar approach in your project.

  Regards,
  
  Vivek Pannu

• 

  Yifan_Zhang

  • Post Options:
  • Link
    Copy

  Posted 20 October 2023, 3:38 am EST

  Hi, the css solution works in a certain way but it is not that fully dynamic. Especially when the label length is really large, there will be a quite large blank space on the left side. So is there any updates for this issue?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2023, 4:37 pm EST

  Hi Yifan,

  This issue is fixed in the latest nightly build of Wijmo, you can verify the same in the following sample - https://jscodemine.grapecity.com/share/E8F3UwcfhU6xGwZWTHmTFQ/

  The fix will be added in the upcoming stable release of Wijmo i.e. 5.20232.MAJOR

  Regards,
  
  Vivek Pannu