Jump to content

  • Changing style of HTML5 chart title text, tooltip text, legend text, etc.

    Friendly User

    By Friendly User

      • Features: Charts Product: JasperReports® Library
     Share

    Scenario:

    You are designging a chart and want to change the style of labels in the chart, for example font of the legends or font of data labels. How can this be done in TIBCO JasperSoft® Studio?

    Solution:

    Some of the styling can be changed in the Basic Formatting for example font size or font type for title but some style objects are only accessible through the advanced properties. The objects in the chart can be styled through their respective style property, for example: title.style, plotOptions.pie.dataLabels.style or legend.itemStyle. This property contains a CSS object and it's not really possible to pass the whole object through the UI but you can pass single properties and their values. These properties are not listed, so you'll have to use the Add button in the Advanced Configuration.

    The Style property contains the High Charts CSS Object:

    https://api.highcharts.com/class-reference/Highcharts.CSSObject#toc3

    You can access the properties of that object like this: <property>.style.<CSSObjectProperty>. For example:

    title.style.fontFamily - change font
legend.itemStyle.fontWeight - make font bold
plotOptions.pie.dataLabels.style.fontSize - change font size

    The CSSObject, in addition to the properties listed in the reference, also inherits whatever styles are supported on the given element. The styles in CSS are named with a dash ("font-family"), in the HTML5 chart configuration they are named in camelCase ("fontFamily"). For example, you can change the style of the font through fontStyle property, even thogh it's not listed in the URL above:

    title.style.fontStyle: italic

    The values for the properties can be looked up in the CSS reference.

     Share
    Go to entries

    User Feedback

    Recommended Comments

    jloomis_1 
    In the advanced properties there is, for example, y-axis > title > style with default value {"color":"#666666"}When I try to change that, there is nothing I have put in that expression editor that works. It either does nothing or it throws errors previewing the chart.

    What is the exact format that is expected in Studio?

    Link to comment
    Share on other sites
    Friendly User

    You don't need to change the value of the style property itself, you need to press the Add button in the top right corner of the panel with all the properties, then access the property within the style object. So for yAxis title color do yAxis.title.style.color and then pass the value as you would pass for other color properties. It can be a keyword, can be a hexadecimal:

    2020-03-05_1636

    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...

© 2024 Cloud Software Group,
Inc. All rights reserved.

Products

Explore