[CLOSED] Category Axis Vertical Direction Text Support

  1. #1

    [CLOSED] Category Axis Vertical Direction Text Support

    Hello,

    Does ext.net support vertical direction text style ?

    vertical text style I mean likes the code below:

    <text x="200" y="0" style="font-size:24px; writing-mode: tb;">åž‚ç›´æ–‡å*—</text>

    Click image for larger version. 

Name:	2017-04-10 09_40_35-SVG 研究之路 (8) - text 文字 - OXXO.STUD.png 
Views:	43 
Size:	7.7 KB 
ID:	24904

    the displaying result please refer here: http://www.oxxostudio.tw/articles/20...g-08-text.html

    Thanks.
    Last edited by fabricio.murta; Apr 11, 2017 at 5:11 PM.
  2. #2
    Hello @u8621011!

    I don't see why Ext.NET wouldn't support it. If you try on some page you are building and can't make it, just provide us the sample code with what your trying to do and we'll help you sort it out!

    At first, you can make a panel/container with <Content /> of free HTML.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,

    Sorry didn't describe our problem well. We are encountered that problem while using CartesianChart. Snapshot & codes like below.

    code
    X.CartesianChart()
        .ID("ReportRadioOrganizationQtyBarChart")
        .Height(500)
        .FlipXY(false)
        .Store(
            storeRadioDevicesBar
        ).Axes(
            X.NumericAxis()
                .Position(Position.Left)
                .Fields("數量")
                .Renderer(r => r.Handler = "return (label%1==0)?label.toFixed(0):'';")
                .Minimum(0)
                .Grid(true),
            X.CategoryAxis()
                .Position(Position.Bottom)
                .Fields("單位名稱")
                .Grid(true)
                .Label(X.ChartLabel().RotationDegrees(-90))
        ).Series(
            X.BarSeries()
                .XField("單位名稱")
                .YField("數量")
                .StyleSpec(
                    X.SeriesSprite().Opacity(0.8).MinGapWidth(10))
                        .HighlightConfig(
                            X.Sprite().FillStyle("rgba(97, 159, 255, 1.0)"
                        )
                        .StrokeStyle("black")
                        .LineWidth(2)
                )
                .Label(
                    X.ChartLabel()
                        .Display(SeriesLabelDisplay.InsideEnd)
                        .Field("數量")
                ).Listeners(lis => {
                    lis.ItemMouseUp.Handler = "handlerReportRadioOrganizationQty.onBarCharItemMouseUp(series, item);";
                    lis.ItemDblClick.Handler = "handlerReportRadioOrganizationQty.onItemDblClick(series, item.record);";
                })
        ).Plugins(
            X.ChartItemEvents()
        )
    snapshotClick image for larger version. 

Name:	2017-04-11 08_49_12-民用無線電機數量統&#35.png 
Views:	53 
Size:	7.3 KB 
ID:	24908

    the label in snapshot above is rotated by -90 degree. but why we rotate it is trying to get text effect likes below

    計
    ç•«
    處
    (
    本
    部
    )

    not

    Click image for larger version. 

Name:	2017-04-11 09_21_19-2017-04-11 08_49_12-民用無線電機數.png 
Views:	42 
Size:	2.1 KB 
ID:	24909
  4. #4
    Hello @u8621011!

    I don't see any CSS rule that makes text write like that -- but maybe specific fonts or maybe line length enough for just one character... I'm talking about HTML in general. Isn't that a font and line breaking that allows writing like that?

    Shouldn't you be transforming your legend text instead of full rotation, just breaking line character by character?

    Something like this on your axis:
    <Renderer Handler="return label.toFixed(0).split('').join('\n');" />
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Fabricio,

    That's why the first post i mention that css sample with this attribute, "writing-mode: tb"

    <text x="200" y="0" style="font-size:24px; writing-mode: tb;">åž‚ç›´æ–‡å*—</text>


    but i cannot see the possiblilty to set in Ext.NET provided html helper?
  6. #6
    This CSS is not supported in modern browsers, still at experimental stage, unfortunately. So we cannot rely on it.

    https://developer.mozilla.org/en/doc...S/writing-mode

    That's why the most feasible way would be to break lines (and depending of the case, reduce line-height and center text) for the time being.

    EDIT: oh yes, and the label component of the charts can't handle just CSS formatting. In fact, to break lines you use \n not <br />. This would probably need specific code to work even when/if writing-mode becomes broadly supported!
    Last edited by fabricio.murta; Apr 11, 2017 at 4:29 AM.
  7. #7
    Fabricio,

    We got it and that workaround is ok.

    Thanks your help,
    Ted
  8. #8
    Hello @u8621011!

    Glad you are okay with the workaround and sorry it is not really what would work best for you!.. We are looking forward for that CSS setting to be available across all browsers!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Oct 23, 2014, 9:18 PM
  2. [CLOSED] Chart Category Axis label getting overlapp after exporting it into Image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 19, 2014, 6:28 PM
  3. [CLOSED] Bar Chart overlapping the Category Axis when there are only negative values
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 18, 2014, 4:21 AM
  4. Text direction
    By MarkExt in forum 2.x Help
    Replies: 1
    Last Post: Nov 19, 2013, 9:25 PM
  5. [CLOSED] Vertical Button With Text, Or Vertical Tabs
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 21, 2011, 9:43 PM

Posting Permissions