Problem with width (truncated plot) on HTML embedded chart ...

Community Help
1

Hi,

I’m trying to embed chart of a notebook into html page with this code but i have some problem to fix the correct width.

Complete code of html page :

Css Style is simple :

  <style>
    body {
      margin: 0;
      line-height: 1.8;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    .wrapper {
      text-align: center;
      max-width: 1000px;
      max-height: 700px;
      margin:  auto;
    }
  </style>

The original chart on Observable :

The exported chart cutted by width on html :

Screenshot_2020-04-03 Screenshot
Screenshot_2020-04-03 Screenshot895×626 15.1 KB

2

Hi I think the issue is on your x scale you’re using Observable responsive width variable

x = d3.scaleTime()
        .domain([d3.min(data_filtered.map(d => d3.isoParse(d.dateRep))), d3.max(data_filtered.map(d => d3.isoParse(d.dateRep))) ])
        .range([margin.left, width - margin.right])

And maybe you want to use viewbox.width ?

x = d3.scaleTime()
        .domain([d3.min(data_filtered.map(d => d3.isoParse(d.dateRep))), d3.max(data_filtered.map(d => d3.isoParse(d.dateRep))) ])
        .range([margin.left, viewbox.width - margin.right])
2 Likes
3

Ahah, omg you’re right, it was the problem … thanks a lot !
Never try to code after midnight …

1 Like