Wijmo Charts: Bar Chart properties

Posted by: reeshabh.choudhary on 4 September 2019, 10:04 pm EST

  • Posted 4 September 2019, 10:04 pm EST

    1. How to reduce width of Bar Charts?
    2. How to reduce width between 2 bar charts?
  • Replied 5 September 2019, 4:08 pm EST

    Hi,

    There is no direct method to change the width of the bar chart. You will need to handle the rendered event of the FlexChart and change the width of the rect element of each of the bar. Please refer to the code snippet and the sample below:

    onRendered(s, e) {
    let elements = e.engine.element;
    let series = elements.querySelectorAll('.wj-series-group g');
    series.forEach((s, idx) => {
    // only change the width of the 1st and 2nd series
    if(idx !== 2) {
    s.querySelectorAll('rect').forEach((rect) => {
    rect.setAttribute('width', '20');
    });
    }
    });
    }


    https://stackblitz.com/edit/angular-fmwsbq

    Regarding the width between the charts:

    We are sorry but this is not possible. The FlexChart calculates the width between each bar according to the dimensions. So, the width automatically changes as the chart resizes.

    Regards
    Ashwin
  • Replied 5 September 2019, 10:01 pm EST



    I want to reduce the marked space between chart and information labels.
  • Replied 8 September 2019, 3:07 pm EST

    Hi,

    To reduce the gap between the axis title and the axis line, you may handle the rendered event of FlexChart and change the "y" attribute of the axis title:
    let axisYLabel = elements.querySelector('.wj-axis-y g text');
    axisYLabel.setAttribute('y', (+axisYLabel.getAttribute('y')) + 20)

    You may also refer to the sample below:

    https://stackblitz.com/edit/angular-lwtpgl

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels