[Solved]-Different color between line and area graph-d3.js

In your style fill just create a function and compare the two values and return a color based on the condition like so:

svg.append('path')
   .data([drawData]).attr('class', 'area')
   .attr('d', area)
   .style('fill', function(d){
      for (i in d) {
        if (d[i]['dailyConsValue'] < d[i]['targetConsValue']) {
           return "green"
        } else {
           return "blue"
        }
   }
   })
   .transition().duration(2500)
   .attrTween( 'd', this.tween( drawData, area ) );

This will work based on only the last value of the data. If you want different colors at every point of the chart depending on your condition, you will have to create a linearGradient with multiple color stops (dynamically) as far as I know.

Now to create a linearGradient, I have created a linear scale using d3 to calculate the offset for color stops and assign color based on your condition. To dynamically create a linearGradient refer to this fiddle

https://jsfiddle.net/aditya_kk29/gsy5dt8h/