Bars chart with error bars

[guadalupebabio]

Would it be possible to add the possibility of error bars to the current ones?. It would look something like this:

with the data formatted as:
Bar =[ {'name': 'Energy Performance ', 'value': [0.3, 0.2, 0.5], 'viz_type': 'bar'} ]
where 'value': [bar value, lower error, higher error]
another option would be like this: Bar = [...'value': bar value, 'error': [lower error, higher error],...]

[RELNO]

Unfortunately not at this moment. We're using a soon-to-be deprecated API for the data-viz functions, which is very buggy and limited. If you like, draft a simple boilerplate example for the data using https://recharts.org/en-US/examples/LineBarAreaComposedChart and I'll be happy to take a look.

[guadalupebabio]

I couldn't find any option to create error bars in the Recharts library, but I found something that works on DevExtreme (not sure if it is a good one). The script could look like this:

import` React from 'react';
import Chart, {
  CommonSeriesSettings,
  Series,
  ValueErrorBar,
  Pane,
  ValueAxis,
} from 'devextreme-react/chart';
const data = [
  {
    name: 'test_1',
    avg: 0.6,
    low: 0.4,
    high: 0.9
  },
  {
    name: 'test_2',
    avg: 0.3,
    low: 0.25,
    high: 0.6
  }
];
class App extends React.Component {
  render() {
    return (

      <Chart
        id="chart"
        dataSource = {data}
      >
        <CommonSeriesSettings argumentField="name" />
     
        <Series
          pane="bottom"
          valueField="avg"
          type="bar"
          name="Test"
        >
          <ValueErrorBar
          
            lowValueField="low"
            highValueField="high"
            lineWidth={1}
            opacity={0.8}
          />
        </Series>
        <Pane name="bottom" />
        <ValueAxis
          tickInterval={0.5}
          pane="bottom"
        >
        </ValueAxis>
      </Chart>
    );
  }
}

function customizeTooltip(pointInfo) {
  return {
    text: `${pointInfo.seriesName}: ${pointInfo.value
    } (range: ${pointInfo.lowErrorValue
    } - ${pointInfo.highErrorValue})`
  };
}

export default App;

[RELNO]

This is not native to the new charts lib we use, but could be added if requested by many. Closing for now.