How to add axes and grid to webgl-candlesticks example?

[YVin3D]

I'm using the WebGL candlesticks example and trying to add and gridlines axes to it like in this tutorial or this chart

primarily using this code snippet:

const pointSeries = fc
  .seriesWebglPoint()
  .crossValue(d => d.x)
  .mainValue(d => d.y);

const chart = fc
  .chartCartesian(xScale, yScale)
  .webglPlotArea(pointSeries)

d3.select("#chart")
    .datum(data)
    .call(chart);

the problem is that the candlesticks examples uses a container object to run the select on. I haven't found any references for container in the d3fc docs.

here is the code snippet for rendering the candlesticks:

d3.select(container)
    .on('click', () => {
        const domain = xScale.domain();
        const mid = (domain[1].valueOf() - domain[0].valueOf()) / 2;
        xScale.domain([domain[0], new Date(domain[1].valueOf() - mid)]);
        series.bandwidth(series.bandwidth()() * 2);
        container.requestRedraw();
    })
    .on('measure', event => {
        const { width, height } = event.detail;
        xScale.range([0, width]);
        yScale.range([height, 0]);

        gl = container.querySelector('canvas').getContext('webgl');
        series.context(gl);
    })
    .on('draw', () => {
        if (pixels == null) {
            pixels = new Uint8Array(
                gl.drawingBufferWidth * gl.drawingBufferHeight * 4
            );
        }
        performance.mark(`draw-start-${frame}`);
        series(data);
        // Force GPU to complete rendering to allow accurate performance measurements to be taken
        gl.readPixels(
            0,
            0,
            gl.drawingBufferWidth,
            gl.drawingBufferHeight,
            gl.RGBA,
            gl.UNSIGNED_BYTE,
            pixels
        );
        performance.measure(`draw-duration-${frame}`, `draw-start-${frame}`);
        frame++;
    });

container.requestRedraw();

---

TLDR: How do I combine the two code snippets? Also, can anyone guide me to resources on how to learn more about this part of the code?

Thanks!

[YVin3D]

Fixed, but now the commented out clause around the "draw" callback makes the graph disappear:

const chart = fc
  .chartCartesian(xScale, yScale)
  .canvasPlotArea(gridline)
  .webglPlotArea(candlesticks)
  .decorate((sel) => {
            sel
            .enter()
            .select('.webgl-plot-area')
            .raise()
            .on('measure', event => {
              const { width, height } = event.detail;
                xScale.range([0, width]);
                yScale.range([height, 0]);

                gl = container.querySelector('canvas').getContext('webgl');
                candlesticks.context(gl);
           })
           .on('click', () => {
            const domain = xScale.domain();
            const mid = (domain[1].valueOf() - domain[0].valueOf()) / 2;
            xScale.domain([domain[0], new Date(domain[1].valueOf() - mid)]);
            candlesticks.bandwidth(candlesticks.bandwidth()() * 2);
            container.requestRedraw();
           })
           .on('measure.bandwidth', (event, d) => { // statically updates bandwidth measure on screen stretch
                const { width } = event.detail;
                candlesticks.bandwidth(width/100.0);
           })
//           .on('draw', () => {
//               if (pixels == null) {
//                   pixels = new Uint8Array(
//                       gl.drawingBufferWidth * gl.drawingBufferHeight * 4
//                   );
//               }
//               performance.mark(`draw-start-${frame}`);
//               candlesticks(data);
//               // Force GPU to complete rendering to allow accurate performance measurements to be taken
//               gl.readPixels(
//                   0,
//                   0,
//                   gl.drawingBufferWidth,
//                   gl.drawingBufferHeight,
//                   gl.RGBA,
//                   gl.UNSIGNED_BYTE,
//                   pixels
//               );
//               performance.measure(`draw-duration-${frame}`, `draw-start-${frame}`);
//               frame++;
//           })
  })

d3.select('#chart')
    .datum(data)
    .call(chart);

container.requestRedraw();