Flex Chart Dual Y Axis

Flex Chart Dual Y Axis

Posted by: reeshabh.choudhary on 22 August 2019, 4:38 am EST

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 August 2019, 4:38 am EST - Updated 3 October 2022, 7:34 pm EST

  Can we implement Dual Y Axis in Wijmo Flex chart as shown in figure below:

  

  840×579 88.9 KB

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 22 August 2019, 4:45 am EST

  Please share example in Angular 2

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 August 2019, 11:55 pm EST

  Hi Reeshabh,

  To add another axis to the FlexChart, you simply need to create a new element and assign this axis to any of the series as required:

  
  <wj-flex-chart [itemsSource]="data"
      [bindingX]="'country'" [itemFormatter]="chartFormatter">
      <wj-flex-chart-axis #axis3
        [axisLine]="true"
        [position]="'Right'"
        [minorGrid]="true"
        [title]="'Downloads'">
        <wj-flex-chart-axis #axisy
        [axisLine]="true"
        [position]="'Right'"
        [minorGrid]="true"
        [wjProperty]="'axisY'"
        [title]="'title'">
        </wj-flex-chart-axis>
      </wj-flex-chart-axis>
       <wj-flex-chart-series [name]="'Sales'" [chartType]="'Line'" [binding]="'sales'"></wj-flex-chart-series>
       <wj-flex-chart-series [name]="'Expenses'" [binding]="'expenses'"></wj-flex-chart-series>
       <wj-flex-chart-series [name]="'Downloads'" [axisY]="axis3" [binding]="'downloads'"></wj-flex-chart-series>
   </wj-flex-chart>
  
  

  Please refer to the sample below:

  https://stackblitz.com/edit/angular-1psvrr

  Regards,
  
  Ashwin

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 23 August 2019, 7:59 am EST

  Is it possible to wrap the width of Labels on X axis?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 12:23 am EST

  Hi Reeshabh,

  You may wrap long labels by handling the rendered event of the FlexChart. In the event handler, get all the HTML elements containing the X-Axis labels and wrap them by dividing them into different elements. Refer to the sample below:

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

  ~regards