React d3 - How to: Several ares on one line chart

Question

I am using d3 library in react.js.

I have a line chart, which I would like to divide in three different colored areas, as shown in the picture. For example if I set the treshold of 2000, then Are should be painted in green. same goes for blue and its treshold. Once I get it to paint with the hard coded values, then I will need to implement a slider and do it a bit more dynamic, but I guess that is easy as soo as I figure out how to implement this Area coloring.

This is the initial code that I have:

<div style={{marginLeft: '20px', width: (this.state.xWidth + 160)}}>
      <Loader style={{float: 'left'}} loaded={this.state.loaded}>
        <Chart width={this.state.xWidth + 160}
               height={this.state.height}
               data={this.state.parts}
               title={this.state.title}
               chartSeries={this.state.chartSeries}
               x={this.state.xAxis}
               >
          <Line
            chartSeries={this.state.chartSeries}
            />
          <Area
              chartSeries = {this.state.redZone}
          />
         <Area
              chartSeries = {this.state.greenZone}
          />
         <Area
              chartSeries = {this.state.blueZone}
          />
          <Xaxis/>
          <Yaxis/>
          <Xgrid/>
          <Ygrid/>

        </Chart>
      </Loader>
    </div>

And preparation:

redZone = [
      {
        field: 'redZone',
        name: 'Red Zone ',
        color: '#005C00',
        style: {
          "strokeWidth": 2,
          "strokeOpacity": .2,
          "fillOpacity": .2
        }
      }
    ],
  greenZone = [
      {
        field: 'greenZone',
        name: 'Green Zone ',
        color: '#005C00',
        style: {
          "strokeWidth": 2,
          "strokeOpacity": .2,
          "fillOpacity": .2
        }
      }
    ],
  blueZone = [
      {
        field: 'blueZone',
        name: 'Blue Zone ',
        color: '#005C00',
        style: {
          "strokeWidth": 2,
          "strokeOpacity": .2,
          "fillOpacity": .2
        }
      }
    ],

And data:

{
    "name": "Miss Demond Weissnat V",
    "zoneCount": 10000,        
    "city": "Savionberg",        
    "index": 1
},
{
    "name": "Easton Mante",
    "zoneCount": 2000,        
    "city": "Kutchberg",        
    "index": 2
}, ...

I imagine I need to add properties to my data model with the color zone, but that is where I am lost...

After implementing areas, they are displayed as seen in the image.

But how can I make it display all the way to the top, and there should be no gradual decline. It should be streight line, like on the previous picture?

Answer 1

The field name in your chartSeries has to have a corresponding property in your data with the exact same name(it is also case sensitive).

Your chartSeries is supposed to be an Array of Objects like this:

    redZone = [{
      field: 'redZone',
      name: 'Red Zone ',
      color: '#005C00',
      style: {
        "strokeWidth": 2,
        "strokeOpacity": .2,
        "fillOpacity": .2
      }
    }, {
      field: 'greenZone',
      name: 'Green Zone ',
      color: '#005C00',
      style: {
        "strokeWidth": 2,
        "strokeOpacity": .2,
        "fillOpacity": .2
      }
    }, {
      field: 'blueZone',
      name: 'Blue Zone ',
      color: '#005C00',
      style: {
        "strokeWidth": 2,
        "strokeOpacity": .2,
        "fillOpacity": .2
      }
    }];

And your data is should look something like this:

    var data = [{
      "name": "Miss Demond Weissnat V",
      "zoneCount": 10000,
      "city": "Savionberg",
      "index": 1,
      "redZone": 10000
    }, {
      "name": "Easton Mante",
      "zoneCount": 2000,
      "city": "Kutchberg",
      "index": 2,
      "greenZone": 10000
    }, {
      "name": "What ever",
      "zoneCount": 3000,
      "city": "wherever",
      "index": 3,
      "blueZone": 3000
    }]

The important thing to note is that the name of every field supplied in the chartSeries has a corresponding property with the same name in the data array of objects.