CODEWITHSUNDEEP
javascriptcanvasd3.js
Daniyal
Daniyal

Reputation: 341

Draw area chart with d3-shape on canvas?

I'm trying to create an area chart on canvas using d3-shape library. Below is the code:

const area = d3_shape.area()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.price); })
  .y0(height)
  .context(context);

context.strokeStyle = '#9DBBEB';
context.beginPath();
area(data);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 1.5;
context.stroke();

What am I doing wrong here?

https://github.com/d3/d3-shape

https://bl.ocks.org/mbostock/1550e57e12e73b86ad9e

Upvotes: 2

Views: 1206

Answers (1)

Mark
Mark

Reputation: 108512

You are setting up the area accessor functions wrong, should be:

var area = d3_shape.area()
    .x(function(d) { return x(d.date); })
    .y0(height) //<-- y0
    .y1(function(d) { return y(d.close); }) //<-- y1
    .context(context);

Running code here.

Upvotes: 2

Related Questions