Flex-chart Stacked Bar Chart

Flex-chart Stacked Bar Chart

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

• 

  kun.leeing

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 February 2020, 10: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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 February 2020, 11: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

• 

  kun.leeing

  • Post Options:
  • Link
    Copy

  Posted 10 February 2020, 2:14 am 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

  ?
  
  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-axis [wjProperty]=“‘axisY’” [title]=“‘Quantity (MW)’”>
  
  
  
  

  Thanks.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 February 2020, 12:06 am 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

• 

  kun.leeing

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 5:09 am 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 February 2020, 1:52 am 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

• 

  kun.leeing

  • Post Options:
  • Link
    Copy

  Posted 17 February 2020, 2:09 am EST

  Thanks so much for all your help, ashwin.