Customize Points and Labels

import React from 'react'; import { Chart, Series, Legend, ValueAxis, VisualRange, Label, ConstantLine, Export } from 'devextreme-react/chart'; import { temperaturesData } from './data.js'; class App extends React.Component { constructor(props) { super(props); this.state = { highAverage: 77, lowAverage: 58 }; this.customizeLabel = this.customizeLabel.bind(this); this.customizePoint = this.customizePoint.bind(this); } render() { return ( <Chart id="chart" title="Daily Temperature in May" dataSource={temperaturesData} customizePoint={this.customizePoint} customizeLabel={this.customizeLabel} > <Series argumentField="day" valueField="value" type="bar" color="#e7d19a" /> <ValueAxis maxValueMargin={0.01}> <VisualRange startValue={40} /> <Label customizeText={this.customizeText} /> <ConstantLine width={2} value={this.state.lowAverage} color="#8c8cff" dashStyle="dash" > <Label text="Low Average" /> </ConstantLine> <ConstantLine width={2} value={this.state.highAverage} color="#ff7c7c" dashStyle="dash" > <Label text="High Average" /> </ConstantLine> </ValueAxis> <Legend visible={false} /> <Export enabled={true} /> </Chart> ); } customizePoint(arg) { if (arg.value > this.state.highAverage) { return { color: '#ff7c7c', hoverStyle: { color: '#ff7c7c' } }; } else if (arg.value < this.state.lowAverage) { return { color: '#8c8cff', hoverStyle: { color: '#8c8cff' } }; } } customizeLabel(arg) { if (arg.value > this.state.highAverage) { return { visible: true, backgroundColor: '#ff7c7c', customizeText: function(e) { return `${e.valueText }&#176F`; } }; } } customizeText(arg) { return `${arg.valueText }&#176F`; } } export default App;