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.

Svg viewbox is to big

See original GitHub issue


I think the height is calculated incorrectly here. Because the viewbox is too big, and it interferes with the other components in my app.

getHeight() {
  return (
    this.getWeekWidth() + // 7 * (10 + 1) = 77
    (this.getMonthLabelSize() - this.props.gutterSize) + // (10 + 4) - 1 = 13
    this.getWeekdayLabelSize() // 30
  ); // 77 + 13 + 30 = 120

what this results in:

<svg class="react-calendar-heatmap" viewBox="0 0 271 120">...</svg>


I have tested in a codesandbox, and would suggest deleting the getWeekdayLabelSize() so that the svg viewbox is only as large as it needs to be. If we remove the + this.getWeekdayLabelSize(), the viewbox would only be 90 high.

Can I make a pull request for it?

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:4
  • Comments:7

github_iconTop GitHub Comments

luwol03commented, Sep 5, 2021

Bumping this. Very annoying and the only reason I am excluding weekdays from my chart.

@ThisTemba As a workaround you can execute that snippet after your import.

import CalendarHeatmap from "react-calendar-heatmap";

CalendarHeatmap.prototype.getHeight = function () {
  return this.getWeekWidth() + (this.getMonthLabelSize() - this.props.gutterSize);
luwol03commented, Mar 5, 2022

Ok cool. But this projects seems dead. Hopefully the maintainers fix this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use the <svg> viewBox attribute?
viewBox width/height – as increase larger than the SVG tag's width/height, it zooms the image OUT inside the viewPort. The SVG shrinks right/ ......
Read more >
How to Scale SVG
The viewBox is an attribute of the <svg> element. Its value is a list of four numbers, separated by whitespace or commas: x,...
Read more >
viewBox - SVG: Scalable Vector Graphics - MDN Web Docs
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a...
Read more >
SVG Viewport and viewBox (For Complete Beginners)
Be sure to visit Envato Elements's huge library of SVG icons. This subscription-based marketplace gives you unlimited SVG icons downloads. This is a...
Read more >
SVG viewBox Attribute
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found