question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trouble with responsive line chart

See original GitHub issue

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: at_demo_-_britecharts After making the window wider: at_demo_-_britecharts

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
DamonCoolcommented, May 17, 2018

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

Thanks!

1reaction
dalerasrorov-ebcommented, May 16, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issues · xanderdeseyn/react-native-responsive-linechart
A customizable and responsive line or area chart for react-native - Issues · xanderdeseyn/react-native-responsive-linechart.
Read more >
recharts line chart not responsive inside a ... - Stack Overflow
This is an known issue in current recharts version 2.1.0: ... remove ResponsiveContainer tags and try < LineChart ...
Read more >
Responsive Charts - Chart.js
Resizes the chart canvas when its container does (important note...). maintainAspectRatio, boolean, true, Maintain the original canvas aspect ...
Read more >
Line Chart responsive option - Material Design for Bootstrap
Hello, When I am using line chart. But it won't be responsive. Is there any solution of that?How can I fixed this problem?...
Read more >
CS343565 - Line Chart widget is not responsive when ... - PTC
Line Chart widget is not responsive when displayed inside a Contained Mashup When adding a Master to a Mashup the Line Chart widget...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found