Unable to rotate the labels on x-axis in DevExtreme

238 views Asked by At

We are build a SPFx webpart in SharePoint 2016. We are using DevExtreme for displaying bar charts with React. The labels on x-axis are a bit long so not all the labels are displayed. When we try to rotate the labels on x-axis using the below code it throws an error.

<ArgumentAxis>
    <Label overlappingBehavior={'rotate'} rotationAngle={90} ></Label>
</ArgumentAxis>

The error in browser console is as below.

Uncaught (in promise) Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=%20Check%20the%20render%20method%20of%20%60ArgumentAxis%60. for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (sp-webpart-workbench-assembly_en-us.js:188)
    at p.i [as _instantiateReactComponent] (sp-webpart-workbench-assembly_en-us.js:174)
    at performInitialMount (sp-webpart-workbench-assembly_en-us.js:174)
    at p.mountComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.mountComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at h.mountChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h._createInitialChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h.mountComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.mountComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at performInitialMount (sp-webpart-workbench-assembly_en-us.js:174)
sp-webpart-workbench-assembly_en-us.js:174 Uncaught TypeError: Cannot read property '__reactInternalInstance$9s1g0il1o7' of null
    at Object.u [as getClosestInstanceFromNode] (sp-webpart-workbench-assembly_en-us.js:174)
    at r (sp-webpart-workbench-assembly_en-us.js:174)
    at i (sp-webpart-workbench-assembly_en-us.js:174)
    at r.perform (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.batchedUpdates (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.i [as batchedUpdates] (sp-webpart-workbench-assembly_en-us.js:174)
    at dispatchEvent (sp-webpart-workbench-assembly_en-us.js:174)
localhost:4321/dist/pfizer-sp-tap-web-part.js:96555 Array(4)
localhost:4321/dist/pfizer-sp-tap-web-part.js:96562 Array(18)
localhost:4321/dist/pfizer-sp-tap-web-part.js:96548 Array(36)
sp-webpart-workbench-assembly_en-us.js:174 Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null
    at p._updateRenderedComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at p._performComponentUpdate (sp-webpart-workbench-assembly_en-us.js:174)
    at p.updateComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at p.receiveComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.receiveComponent (sp-webpart-workbench-assembly_en-us.js:174)
    at Object.updateChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h._reconcilerUpdateChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h._updateChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h.updateChildren (sp-webpart-workbench-assembly_en-us.js:174)
    at h._updateDOMChildren (sp-webpart-workbench-assembly_en-us.js:174)
/_layouts/15/WsaUpload.ashx:1 Failed to load resource: the server responded with a status of 403 (Forbidden)
2sp-webpart-workbench-assembly_en-us.js?version=1:174 Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null
    at p._updateRenderedComponent (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at p._performComponentUpdate (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at p.updateComponent (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at p.receiveComponent (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at Object.receiveComponent (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at Object.updateChildren (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at h._reconcilerUpdateChildren (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at h._updateChildren (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at h.updateChildren (sp-webpart-workbench-assembly_en-us.js?version=1:174)
    at h._updateDOMChildren (sp-webpart-workbench-assembly_en-us.js?version=1:174)

The link in the error message shows the below description.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ArgumentAxis

What am I doing wrong here?

1

There are 1 answers

0
Arslan Ali On

for overlappingBehavior, Accepted Values: 'rotate' | 'stagger' | 'none' | 'hide', in string.