DevExtreme React Chart (CTP)

Here’s another piece of fantastic news for React users: our DevExtreme React Chart is available now as a CTP release!

This chart widget is 100% native to React and based on the same plugin architecture used in the DevExtreme React Grid. For visual chart elements, this approach is easy to understand: for instance, if you need to show a chart axis, you add the ArgumentAxis or ValueAxis plugin. In the same way, you compose other visual parts to create a complete chart for your business use case.

<Chart data={data} width={700} height={400}>
  <Legend />
  <ArgumentAxis name="country" type="band" />
  <ValueAxis name="age" />
  <BarSeries name="👶Young"
    valueField="young" argumentField="country"
    axisName="age"
    stack="a" />
  <BarSeries name="🧑Adult"
    valueField="adult" argumentField="country"
    axisName="age"
    stack="a" />
  <BarSeries name="🧓Old"
    valueField="old" argumentField="country"
    axisName="age"
    stack="a" />
</Chart>

Hybrid rendering

The React Chart uses a rendering mechanism that combines HTML and SVG. This means that you can use HTML and CSS to influence layout and appearance of chart building blocks — currently legend and title, but others to come — while taking advantage of the precision and rendering quality of SVG for the chart series.

For example, you could add a title to the legend like this:

const RootWithTitle = props => (
  <div>
    <h5 style={{ marginLeft: '2.5rem' }}>👪 Population</h5>
    <Legend.Root {...props} />
  </div>);

...
<Legend rootComponent={RootWithTitle}/>

What’s in the CTP

We have already implemented a large part of our planned feature set at this stage. Here’s an overview of the completed functionality:

• Supported series types:
  • Bar
  • Line
  • Spline
  • Area
  • Scatter
  • Pie
  • Stacked series types for bar, line, spline and area
• It is possible to mix series types in one chart
• The BarSeries has grouping support
• Multiple axes can be combined in one chart
• The Legend, Title and Axis plugins have both Bootstrap 4 and Material-UI implementations, so you can expect seamless integration with your themed application.

Future plans

We are currently working on several features that will be available in the near future:

• Logarithmic and exponential axes
• Improved color (palette) management
• Animations
• Interactive features: hovering, selection and tooltips

Beyond this, we have longer-term plans that include the following items. Of course your feedback is welcome to help us prioritize!

• Bubble and Financial series types
• Additional interactive features: cross-hair support, scrolling and zooming
• Data aggregation

Try it now!

The React Chart CTP is first published with version 1.3.0-beta.2, available now. We have created an initial set of documentation, and you can find the getting started instructions here. As usual, we’re interested in any thoughts you can share with us, here or in our GitHub issue tracker!

Finally we need to mention this, since we are in a pre-release phase: We can’t promise a timeline for a final React Chart release, and it will not be ready yet by the time 1.3.0 leaves beta status. Please note that we expect code and documentation to have bugs at this point, and there will be breaking changes in the future before a final release is published.

Free DevExpress Products - Get Your Copy Today