Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

Question

Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

2.3k views Asked by tenebris silentio At 15 August 2024 at 22:42

I have a Plotly.JS heatmap that's working great and I have some descriptive text I want to put above it in a separate div, however the gap looks a bit awkward. Somehow I am struggling to reduce the padding so that my text (e.g., My description) and the heatmap and closer together. I tried using CSS, but I am clearly off. I'm sure this is an easy answer and that I'm overlooking something simple. Any help is appreciated.

Codepen: https://codepen.io/tenebris_silentio/pen/eYzgZMw

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>

Original Q&A

There are 3 answers

S.Visser On 23 October 2020 at 12:20

Because Plotly.JS is generating a SVG its not easy to style it. A solution is to style a element with position absolute so you can make it "overlap" with the SVG.

For example:

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

.myDiv{
    padding: -1px;
}

p {
  position: absolute;
  z-index: 10;
  margin-top: 45px;
  margin-left: 80px;
}

<p>My description.</p>
<div id='myDiv'></div>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

Nobal Mohan On 23 October 2020 at 12:23

Why not add the text in the layout itself?

var layout = {
  "title": {"text": "My description."},
  ...
};

**Steve** · Accepted Answer · 2020-10-23 12:22:02

You can use the margin configuration in your layout:

var layout = {
  // ...
    margin: {
      t: 10
    },
  // ...

<!DOCTYPE html>

  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  </head>
<br>

My description.

    <div id='myDiv'><br> </div>
  </div>
</div><script>

var colorscaleValue = [
  [0, '#ADD8E6'],
  [1, '#000080']
];
  var data = [
    {

      z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
      x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
      y: ['Category 1', 'Category 2', 'Category 3'],

      colorscale: colorscaleValue,
      type: 'heatmap',

      hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

      hoverongaps: true
    }
  ];

  var layout = {
    title: '',
    width: 900,
    height: 560,
    autosize: false,
    margin: {
      t: 10
    },
    yaxis: {automargin: true}
  };

  Plotly.newPlot('myDiv', data, layout);

  </script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>

  <style>

.myDiv{
    padding: -1px;
}

  </style>

TechQA.

Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in PLOTLY

Related Questions in PLOTLY.JS

Popular Questions

Popular Tags

Trending Questions