Range Column Charts, also referred as Vertical Range Column Charts, are similar to Column Charts except that they are drawn between a range of values - Low & High. Given example shows React Range Column Chart along with source code that you can try running locally.
/* App.js */ import React, { Component } from 'react'; import CanvasJSReact from '@canvasjs/react-charts'; //var CanvasJSReact = require('@canvasjs/react-charts'); var CanvasJS = CanvasJSReact.CanvasJS; var CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { render() { const options = { theme: "dark2", exportEnabled: true, animationEnabled: true, title:{ text: "Monthly Average Temperature Variation in Sydney" }, axisX: { valueFormatString: "MMM YYYY" }, axisY: { title: "Temperature (°C)", includeZero: true, suffix: " °C" }, data: [{ type: "rangeColumn", indexLabel: "{y[#index]}°", xValueFormatString: "MMM YYYY", toolTipContent: "<strong>{x}</strong></br> Max: {y[1]} °C<br/> Min: {y[0]} °C", dataPoints: [ { x: new Date("2017- 01- 01"), y: [19, 26] }, { x: new Date("2017- 02- 01"), y: [19, 26] }, { x: new Date("2017- 03- 01"), y: [18, 25] }, { x: new Date("2017- 04- 01"), y: [15, 23] }, { x: new Date("2017- 05- 01"), y: [12, 20] }, { x: new Date("2017- 06- 01"), y: [10, 18] }, { x: new Date("2017- 07- 01"), y: [8, 17] }, { x: new Date("2017- 08- 01"), y: [9, 18] }, { x: new Date("2017- 09- 01"), y: [12, 20] }, { x: new Date("2017- 10- 01"), y: [14, 22] }, { x: new Date("2017- 11- 01"), y: [16, 24] }, { x: new Date("2017- 12- 01"), y: [18, 26] } ] }] } return ( <div> <CanvasJSChart options = {options} /* onRef={ref => this.chart = ref} */ /> {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/} </div> ); } } export default App;
In the above graph, export property is enabled, through which you can export chart as JPEG or PNG image. You can override the file name of exported image using exportFileName property. You can also export chart using API with exportChart method.
Note For step by step instructions, follow our React Integration Tutorial