Trouble with responsive line chart
See original GitHub issueFirst 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Here’s a codepen. Let me know if you have any questions. https://codepen.io/damoncool/pen/gzQWdx
Thanks!
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