React Multi Series Spline Area Charts & Graphs

Download React Chart Samples

Example shows React Multi Series Spline Area Chart, that's generally used to show smooth gradual changes instead of sharp changes in value.

  1. [React Code]
  2. /* App.js */
  3. import React, { Component } from 'react';
  4. import CanvasJSReact from '@canvasjs/react-charts';
  5. //var CanvasJSReact = require('@canvasjs/react-charts');
  6.  
  7. var CanvasJS = CanvasJSReact.CanvasJS;
  8. var CanvasJSChart = CanvasJSReact.CanvasJSChart;
  9.  
  10. class App extends Component {
  11.     render() {
  12.         const options = {
  13.     animationEnabled: true,
  14.     exportEnabled: true,
  15.     title: {
  16.         text: "Annual Expenses"
  17.     },
  18.     axisY: {
  19.         prefix: "$"
  20.     },
  21.     toolTip: {
  22.         shared: true,
  23.         content: "{name}: ${y}"
  24.     },
  25.     legend: {
  26.         fontSize: 13
  27.     },
  28.     data: [{
  29.         type: "splineArea",
  30.         showInLegend: true,
  31.         name: "Salaries",
  32.         markerSize: 0,
  33.         color: "rgba(54,158,173,.9)",
  34.         dataPoints: [
  35.             { x: new Date(2020, 0), y: 3000000 },
  36.             { x: new Date(2020, 1), y: 3500000 },
  37.             { x: new Date(2020, 2), y: 3000000 },
  38.             { x: new Date(2020, 3), y: 3040000 },
  39.             { x: new Date(2020, 4), y: 2090000 },
  40.             { x: new Date(2020, 5), y: 3100000 },
  41.             { x: new Date(2020, 6), y: 3020000 },
  42.             { x: new Date(2020, 7), y: 3000000 },
  43.             { x: new Date(2020, 8), y: 3300000 },
  44.             { x: new Date(2020, 9), y: 3800000 },
  45.             { x: new Date(2020, 10), y: 3890000 },
  46.             { x: new Date(2020, 11), y: 3900000 }
  47.         ]
  48.     },
  49.     {
  50.         type: "splineArea",
  51.         showInLegend: true,
  52.         name: "Office Cost",
  53.         markerSize: 0,
  54.         color: "rgba(134,180,2,.9)",
  55.         dataPoints: [
  56.             { x: new Date(2020, 0), y: 2010000 },
  57.             { x: new Date(2020, 1), y: 1600000 },
  58.             { x: new Date(2020, 2), y: 1400000 },
  59.             { x: new Date(2020, 3), y: 1800000 },
  60.             { x: new Date(2020, 4), y: 1800000 },
  61.             { x: new Date(2020, 5), y: 2100000 },
  62.             { x: new Date(2020, 6), y: 2200000 },
  63.             { x: new Date(2020, 7), y: 2500000 },
  64.             { x: new Date(2020, 8), y: 2300000 },
  65.             { x: new Date(2020, 9), y: 2500000 },
  66.             { x: new Date(2020, 10), y: 2600000 },
  67.             { x: new Date(2020, 11), y: 2500000 }
  68.         ]
  69.     },
  70.     {
  71.         type: "splineArea",
  72.         showInLegend: true,
  73.         name: "Entertainment",
  74.         markerSize: 0,
  75.         color: "rgba(194,70,66,.9)",
  76.         dataPoints: [
  77.             { x: new Date(2020, 0), y: 1010000 },
  78.             { x: new Date(2020, 1), y: 600000 },
  79.             { x: new Date(2020, 2), y: 340000 },
  80.             { x: new Date(2020, 3), y: 400000 },
  81.             { x: new Date(2020, 4), y: 900000 },
  82.             { x: new Date(2020, 5), y: 390000 },
  83.             { x: new Date(2020, 6), y: 420000 },
  84.             { x: new Date(2020, 7), y: 500000 },
  85.             { x: new Date(2020, 8), y: 1430000 },
  86.             { x: new Date(2020, 9), y: 1230000 },
  87.             { x: new Date(2020, 10), y: 830000 },
  88.             { x: new Date(2020, 11), y: 630000 }
  89.         ]
  90.     },
  91.     {
  92.         type: "splineArea",
  93.         showInLegend: true,
  94.         name: "Maintenance",
  95.         markerSize: 0,
  96.         color: "rgba(127,96,132,.9)",
  97.         dataPoints: [
  98.             { x: new Date(2020, 0), y: 170000 },
  99.             { x: new Date(2020, 1), y: 260000 },
  100.             { x: new Date(2020, 2), y: 100000 },
  101.             { x: new Date(2020, 3), y: 140000 },
  102.             { x: new Date(2020, 4), y: 90000 },
  103.             { x: new Date(2020, 5), y: 100000 },
  104.             { x: new Date(2020, 6), y: 120000 },
  105.             { x: new Date(2020, 7), y: 500000 },
  106.             { x: new Date(2020, 8), y: 130000 },
  107.             { x: new Date(2020, 9), y: 230000 },
  108.             { x: new Date(2020, 10), y: 280000 },
  109.             { x: new Date(2020, 11), y: 130000 }
  110.         ]
  111.     }]
  112. };
  113.  
  114.         return (
  115.             <div>
  116.                 <CanvasJSChart options={options}
  117.                 /* onRef={ref => this.chart = ref} */
  118.                 />
  119.                 {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
  120.             </div >
  121.         );
  122.     }
  123. }
  124. export default App;

Chart Customizations

Shared tooltip is helpful to display information of all the dataseries common to x-value in a single tooltip. Some of the other commonly used customization options are color, fillOpacity, etc.

Note   For step by step instructions, follow our React Integration Tutorial