Flex-chart Stacked Bar Chart

Posted by: kun.leeing on 9 February 2020, 1:52 pm EST

  • Posted 9 February 2020, 1:52 pm EST

    Hi guys,
    For the stacked bar chart example here.

    https://www.grapecity.com/wijmo/demos/Chart/Bar/StackedBar/purejs

    how to point the AxisX to Year and AxisY the amount number? I mean the other way around on X and Y to make the stacked bar erect.
    thanks.
  • Replied 9 February 2020, 2:23 pm EST

    Hi Kun,

    You just need to change the chartType to chart.ChartType.Column and the X-Axis and Y-Axis will be reversed:
    let barchart = new chart.FlexChart('#chart', {
    header: 'Country GDP',
    chartType: chart.ChartType.Column,
    ....
    });


    Regards,
    Ashwin
  • Replied 9 February 2020, 5:14 pm EST

    Thanks so much, Ashwin. That helped me resolve the issue. You are great!

    I have another question about the legend. Can I move it to another <div>?
    And for my example , I want to display an Array(336) and every item has more than 50 properties onto a stacked column chart. I put the code like below, but it does not work seemingly.

    <wj-flex-chart #flexChart class="d-flex" [chartType]="'Column'" [bindingX]="'key'" [stacking]="'Stacked'"
    [palette]="palette">
    <wj-flex-chart-legend [position]="'Right'">
    </wj-flex-chart-legend>
    <wj-flex-chart-axis [wjProperty]="'axisY'" [title]="'Quantity (MW)'">
    </wj-flex-chart-axis>
    </wj-flex-chart>

    Thanks.
  • Marked as Answer

    Replied 10 February 2020, 3:06 pm EST

    Hi,

    You can change the position of the legend to the bottom of the chart so that all the series can be displayed easily according to the available width. Refer to the demo link below. Try changing the Legend position and let us know whether this works for you.

    https://www.grapecity.com/wijmo/demos/Chart/Features/LegendsAndTitles/angular

    ~regards
  • Replied 13 February 2020, 8:09 pm EST

    Hi Ashwin,

    Can I ask what else options in the series.symbolStyle ? I can see we can set
    {
    fill: 'green',
    stroke: 'yellow',
    strokeWidth: 2
    }
    What other options can we use? Did not find much info from our documentation.

    Thanks,
    Kun
  • Replied 16 February 2020, 4:52 pm EST

    Hi Kun,

    The symbolStyle property is used to apply CSS styles to the symbols of the Series. You can provide any CSS property that works with SVG elements as the options.

    ~regards
  • Replied 16 February 2020, 5:09 pm EST

    Thanks so much for all your help, ashwin.
Need extra support?

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

Learn More

Forum Channels