chart ui categoryAxis custom labels

7 posts, 1 answers
  1. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 25 Sep 2014 Link to this post

    Hi, could you please explain me how can i implement something like in attached image.
    So, I need to make line chart with custom labels. I need to have two kind of labels: with different size of majorTicks and font-size,  like shows in attached file.

    Thanks in advance.

  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 26 Sep 2014 Link to this post

    Hi Arsen,

    Thanks for writing.
    Currently we do not have support for minor ticks and labels, all ticks/labels are the same. However, you can take full control over the label rendering by providing a custom label renderer. Each axis has a setLabelRenderer() method that you can use to insert your implementation. You can use this, to at least make your major labels larger.

    Please write again if you have more questions.

    Regards,
    Victor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 26 Sep 2014 in reply to Victor Link to this post

    Victor, thank you for the quick answer.

    Could you provide small example ?
    I did not understand how to make custom label renderer and realise two kind of ticks/labels together.

    Thanks 
  5. Answer
    Victor
    Admin
    Victor avatar
    1351 posts

    Posted 01 Oct 2014 Link to this post

    Hello Arsen,

    As a simple example, consider this code snippet:
    public class CustomLabelsAxis extends CategoricalAxis {
        @Override
        protected void renderLabelNoFitMode(Canvas canvas, RadRect layoutSlot, String labelContent, AxisLabelModel labelModel) {
            TextPaint customLabelPaint = new TextPaint();
            customLabelPaint.setColor(Color.MAGENTA);
            // Set this size based on your label model index.
            // For example to render every second label use (labelModel.index() % 2) == 0 as a condition
            // and then call customLabelPaint.setTextSize(50); to render a label with a size of 50 pixels.
            StaticLayout textInfo = labelModel.getLabelSizeInfo().textLayout;
            float x = (float) layoutSlot.x;
            float y = (float) layoutSlot.y + textInfo.getLineBaseline(0);
            canvas.drawText(labelContent, x, y, customLabelPaint);
        }
    }

    Since the Axis class implements the AxisLabelRenderer interface you can inherit from it and override some of the axis specific label rendering methods. 

    However, I must inform you, that this code will work only with the latest chart version which will be officially released in two weeks.

    There is no easy way to do this with the current release.

    Regards,
    Victor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 01 Oct 2014 in reply to Victor Link to this post

    Victor, Thanks a lot

    I have one more urgent question, if it's possible answer this one too: http://www.telerik.com/forums/chart-ui-categoryaxis-label's-template-issue

    Thanks again
  7. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 02 Oct 2014 Link to this post

    Hi Arsen,

    I have move the thread you referred to to its appropriate forum, the team that works on the kendo charts will be able to assist you more efficiently.

    Regards,
    Victor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 02 Oct 2014 in reply to Victor Link to this post

    Thanks, that's right.
Back to Top
DevCraft banner