Trouble with responsive line chart

First off, thanks for the great library. I’m looking forward to using it on a new project!

Expected Behavior

I’m trying to get the responsive charts working. It seems that the axis is scaling fine, but the lines don’t seem to redraw.

Current Behavior

When I resize the window the axis grows or shrinks correctly, but the lines stay the original width.

Possible Solution

I’m sure I missed something.

Steps to Reproduce (for bugs)

        <script>
            // Line
            var lineChart = britecharts.line();
            var tooltip = britecharts.tooltip();
            var lineData = data;

            lineChart
                  .margin({
                      top: 60,
                      bottom: 50,
                      left: 100,
                      right: 20
                  })
                  .lineCurve('cardinal')
                  .grid('full')
                  // .width(init_ContainerWidth)
                  .height(350)
                  .on('customMouseOver', tooltip.show)
                  .on('customMouseMove', tooltip.update)
                  .on('customMouseOut', tooltip.hide);

              tooltip
                  .title('.');

              d3.select('.line').datum(lineData).call(lineChart);

              d3.select('.line .metadata-group .vertical-marker-container').datum([]).call(tooltip)

              const redrawChart = () => {
                  let container = d3.select('.line');
                  let newContainerWidth = container.node() ? container.node().getBoundingClientRect().width : false;

                  // Setting the new width on the chart
                  lineChart.width(newContainerWidth);

                  // Rendering the chart and line again
                  container.datum(lineData).call(lineChart);
                  d3.select('.line .metadata-group .vertical-marker-container').datum([]).call(tooltip)
              };

              const throttledRedraw =  _.throttle(redrawChart, 200);

              window.addEventListener("resize", throttledRedraw);
        </script>

Screenshots (if appropriate):

Initial Load: After making the window wider:

Context

One of the key requirements for my project is responsive and mobile friendly UI.

Your Environment

Version 65.0.3325.181 (Official Build) (64-bit) Mac OS High Sierra

[DamonCool]

Here’s a codepen. Let me know if you have any questions. https://codepen.io/damoncool/pen/gzQWdx

Thanks!

[dalerasrorov-eb]

Would be very helpful to have a codepen for this one. Could you add it? Will be easier to reproduce and have either a fix (if it’s a bug) or suggestion