nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Labels Rotation on Line Chart Axis in a Widget

NadeemShaukat

I am trying to rotate axis labels on a line chart by embedding a font. Font color and size gets implemented but labels do not get rotated. Attached is part of the code that shows embedding the font and using it on AxisRenderer line using styleName. I am creating the line chart in s:TitleWindow environment. However, the labels get rotated if I use the same code in s:Applicaion environment.

Does anyone know if there is something in the Flexviewer's css that prohibits rotating labels? Or if you know how it should work, please respond. Thanks

Nadeem

LabelRotation.txt.zip

threats_choices2.JPG

タグ付きの投稿をもっと見る

Accepted answers

All comments

MehulChoksey

Could you try example at:
http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/
Seem like removing canDropLabels=true from your source code will do the trick.....

Mehul

NadeemShaukat

Mehul

Thanks for your response.

I am already using canDropLabels=true on the AxisRenderer line, but it makes no difference. As I have mentioned in my initial post that label rotation works fine in a standalone application, but is not working in a TitleWindow file in Flex Viewer's widgets environment.

Nadeem

RobertScheitlin__GISP

Nadeem,

If I remember correctly you have to embed the font in the index.mxml also. Just like you are doing in the widget.

NadeemShaukat

Mehul,

The index.mxml calls the defaults.css file. I had tried to embed fonts in the defaults.css. The font color and size takes into effect but not the rotation.

Nadeem

DanielSmith

any more thoughts on this? I have been fighting the label rotation on a column chart for what seems like forever. I have embedded my fonts but when i use the font (via a style or otherwise) the labels disappears even though the same code works in a small sample. fonts have been embedded in the index.xml and the widget itself. It appears that i can see little artifact boxes where the labels go but no text.

MehulChoksey

Seems like an adobe issue: http://bugs.adobe.com/jira/browse/FLEXDMV-1599
Hopefully, Adobe fixes this if you vote for it...

RobertScheitlin__GISP

All,

As I said earlier the answer is still simple just embed the font in the default application (i.e. index.mxml)

Code for ChartWidget:

 <fx:Style> 
  @namespace mx "library://ns.adobe.com/flex/mx"; 
  @font-face{
   src: url("assets/arial.ttf");
   fontFamily: myFontFamily;
   embedAsCFF: false;
  }
  mx|ColumnChart {
   fontFamily: myFontFamily;
   fontSize: 16;
  }
 </fx:Style>

     <mx:horizontalAxisRenderers>
      <mx:AxisRenderer axis="{myXAxis}" labelRotation="45"/>
     </mx:horizontalAxisRenderers>

Code for index.mxml

 <fx:Style> 
  @font-face{
   src: url("assets/arial.ttf");
   fontFamily: myFontFamily;
   embedAsCFF: false;
  }
 </fx:Style>

Preview.jpg

DanielSmith

Robert,

Thank you so much for your code snippets. Unfortunately I am working with Flex Builder 3 and am unable to get your code to work correctly. Please let me know (if you have time) how to get these labels rotated in FB3 with the 1.x Flex Viewer.

P.S. did they ever get the MVP stuff worked out? I think I owe you a couple bumps

MGSethe

Hello

I have referred to this post to rotate my Chart Lables. I can get the Labels rotated on the Chart, but i am having a problem in getting the font for the horizontal lables to display correctly with the right font size.
Has anyone experienced this problem before?

I have attached my Chart Renderder Code together with the Image of the result chart to see what i get,

Please help,

Chartlables.png

Identifyresultchart.txt.zip

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.