React - problem with FlexChartPlotArea component

React - problem with FlexChartPlotArea component

Posted by: marojevic on 25 December 2018, 11:24 am EST

• 

  marojevic

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 December 2018, 11:24 am EST

  Hello,

  I’m having a problem separating data in different plot areas using wijmo react.
  
  Can’t find a demo or example with FlexChartPlotArea component for adding areas to the FlexChart.
  
  I’ve created 3 plot areas and I’m trying to move last 4 series to plot area called ‘cutRatioArea’, but i’m having all series in the first area.
  
  I’m I doing something wrong or missing something?
  
  Here is the code:

   <FlexChart
      itemsSource={props.data}
      bindingX="MPDate"
      legendToggle={true}
      chartType="Line"
      onSeriesVisibilityChanged={(e) => props.visibilityChanged(e.series.name, e.series.visibility)}>
  
      <FlexChartLegend position="Top" />
      <FlexChartAxis wjProperty="axisX" min={props.axisXMin} max={props.axisXMax} format="MMM-yyyy" labelAngle={45} majorUnit={365} />
      <FlexChartAxis wjProperty="axisY" majorGrid={false} title="Produciton" logBase={props.logBase} />
  
      <FlexChartSeries name={translate('MPADF')} binding="MPADF" style={{ strokeWidth: 1, fill: 'black', stroke: 'black' }} />
      <FlexChartSeries name={translate('MPADO')} binding="MPADO" style={{ strokeWidth: 1, fill: 'green', stroke: 'green' }} />
      <FlexChartSeries name={translate('MPADW')} binding="MPADW" style={{ strokeWidth: 1, fill: 'blue', stroke: 'blue' }} />
      <FlexChartSeries name={translate('MPADG')} binding="MPADG" style={{ strokeWidth: 1, fill: 'red', stroke: 'red' }}>
          <FlexChartAxis wjProperty="axisY" position="Right" majorGrid={true} logBase={props.logBase} title="Gas Produciton" />
      </FlexChartSeries>
  
      <FlexChartSeries name={translate('MPOC')} binding="MPOC" style={{ strokeWidth: 1, fill: 'darkGreen', stroke: 'darkGreen' }} visibility={props.MPOCVisibility} >
          <FlexChartAxis wjProperty="axisY" position="Right" plotArea='cutRatioArea' />
      </FlexChartSeries>
      <FlexChartSeries name={translate('MPWC')} binding="MPWC" style={{ strokeWidth: 1, fill: 'darkBlue', stroke: 'darkBlue' }} visibility={props.MPWCVisibility} >
          <FlexChartAxis wjProperty="axisY" plotArea='cutRatioArea' />
      </FlexChartSeries>
      <FlexChartSeries name={translate('MPGOR')} binding="MPGOR" style={{ strokeWidth: 1, fill: 'blueViolet', stroke: 'blueViolet' }} visibility={props.MPGORVisibility} >
          <FlexChartAxis wjProperty="axisY" plotArea='cutRatioArea' />
      </FlexChartSeries>
      <FlexChartSeries name={translate('MPGLR')} binding="MPGLR" style={{ strokeWidth: 1, fill: 'goldenRod', stroke: 'goldenRod' }} visibility={props.MPGLRVisibility} >
          <FlexChartAxis wjProperty="axisY" plotArea='cutRatioArea' />
      </FlexChartSeries>
  
      <FlexChartPlotArea name='dailyArea' row={0} style={{ fill: 'rgba(136,189,230,0.2)' }} />
      <FlexChartPlotArea name='divider' row={1} style={{ fill: 'green' }} />
      <FlexChartPlotArea name='cutRatioArea' row={2} style={{ fill: 'red' }} />
  </FlexChart>
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 December 2018, 2:21 am EST

  Hi,

  To display a series in different plot areas, we need to perform the following tasks:
  
  • Create an axis for the desired plotArea
  
  • Assign axis to the series
  
  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/react-echjaj?file=index.js

  ~Sharad

• 

  marojevic

  • Post Options:
  • Link
    Copy

  Posted 26 December 2018, 7:26 am EST

  Ah, ok.
  
  Thank you very much for your answer Sharad.

  Regards