Jump to content
Changes to the Jaspersoft community edition download ×
  • How to remove or change the symbols in the legend for html5 highchart charts


    Issue Description

    Some customers might want to customize the look & feel of the symbol adjacent to series in a chart, like the blue circle seen below:



    You can find option and examples for manipulating the legend feature of one of the highcharts here:
    Unfortunately there is no property/option for removing the symbol but there are a few properties which might be interesting - symbolHeight and symbolWidth.     The symbolRadius definition here, http://api.highcharts.com/highcharts/legend.symbolRadius ,   
    contains examples. Click "Round Labels" and you'll be presented a jsfiddle showing some interesting label manipulation which you can test for yourself.   
    You can essentially remove the symbol by setting height, width and radius to .001 , then hit "RUN" , like:
            legend: {
                symbolHeight: .001,
                symbolWidth: .001,
                symbolRadius: .001
    If that trick helps, in studio rightclick your chart -> Edit Chart Properties, expand legend, hit symbols, modify Width, Height, etc.   Or just go straight into the jrxml source and add the property directly via tags, like:
    <hc:chartProperty name="legend.symbolWidth" value=".001"/>
    If .001 isn't effective, then you can ask your javascript developers to consider customizing the symbol, following this example:


    Ref. Case 01444497

    User Feedback

    Recommended Comments

    There are no comments to display.

    This is now closed for further comments

  • Create New...