1

I have created a chart inside a pop-up window for a marker on leaflet javascript. I am new to html, css, and javascript. I have also used d3js for the plot. The problem is that I cannot increase the plot size inside the window (in this case, only the width) to cover the entire window. I have used a long series of values (for my graph) since it may be possible in real data when one wants to create some charts.

I want the graph to be horizontally stretched so that the bars are wider. The data that I want to use is quite long.

enter image description here

I have attached the entire code so that it can be tested easily.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <style>
        #map { height: 800px; }

        .leaflet-popup-content-wrapper {
            width: 600px !important;
            height: 200px !important;
        }

        .leaflet-popup-content {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="map"></div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="lib/leaflet-geoserver-request-master/leaflet-geoserver-request-master/src/L.Geoserver.js"></script>

<script>
    // Initialize the map


    var map = L.map('map').setView([35.5, 23.92], 11); // Centered at (latitude, longitude) and zoom level

    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map)



var geojsonFeature = {
      "type": "Feature",
      "properties": {
        "name": "Sample Location",
        "chartData": [20, 30, 40, 10, 50, 20, 30, 40, 10, 50, 20, 30, 40, 10, 50, 20, 30, 40, 10, 50, 30, 40, 10, 50] // Sample chart data
      },
      "geometry": {
        "type": "Point",
        "coordinates": [23.7, 35.4]
      }
    };


// ... (previous Leaflet and GeoJSON setup)

L.geoJSON(geojsonFeature, {
  onEachFeature: function (feature, layer) {
    if (feature.properties && feature.properties.chartData) {
      layer.bindPopup(function (layer) {
        var popupContent = document.createElement('div');
        var canvas = document.createElement('canvas');
        canvas.width = 400; // Adjust as needed
        canvas.height = 200; // Adjust as needed
        popupContent.appendChild(canvas);

        var ctx = canvas.getContext('2d');
        new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['A','B', 'C' ,'D' ,'E' ,'F', 'G' ,'H' ,'I', 'J', 'K', 'L', 'M' ,'N', 'O' ,'P', 'Q', 'R', 'S', 'T' ,'U' ,'V' ,'W', 'X' ,'Y', 'Z'],
            datasets: [{
              label: 'Chart Data',
              data: feature.properties.chartData,
              backgroundColor: 'rgba(120, 152, 35, 0.6)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });


        return popupContent; // Return an empty string to prevent Leaflet from creating its own content
      });
    }
  }
}).addTo(map);

</script>

</body>
</html>

I know that the following lines change the size of the window. I have already increased it.

        .leaflet-popup-content-wrapper {
            width: 600px !important;
            height: 200px !important;
        }

I thought that the following lines would do the trick. However, when I tried to increase the percentage, nothing happened.

        .leaflet-popup-content {
            width: 100%;
            height: 100%;
        }

Neither changes to the following lines worked.

        canvas.width = 500; // Adjust as needed
        canvas.height = 200; // Adjust as needed

Any idea what could I do to fix it?

1
  • Yes, I want the graph to be horizontally stretched so that the bars are wider. The data that I want to use is long. Dec 5, 2023 at 22:05

1 Answer 1

1

It takes a bit of playing with browser debugger to find out what will make chart.js happy. The fact is that it modifies canvas attributes before drawing chart on it.

To get desired results, relevant part of CSS has to be modified like this:

.leaflet-popup-content {
  width: 100% !important;
  height: 90%;
}

Relevant part of JS has to be modified like this:

L.geoJSON(geojsonFeature, {
  onEachFeature: function (feature, layer) {
    if (feature.properties && feature.properties.chartData) {
      layer.bindPopup(function (layer) {
        var canvas = document.createElement('canvas');
        new Chart(canvas, {
          type: 'bar',
          data: {
            labels: ['A','B', 'C' ,'D' ,'E' ,'F', 'G' ,'H' ,'I', 'J', 'K', 'L', 'M' ,'N', 'O' ,'P', 'Q', 'R', 'S', 'T' ,'U' ,'V' ,'W', 'X' ,'Y', 'Z'],
            datasets: [{
              label: 'Chart Data',
              data: feature.properties.chartData,
              backgroundColor: 'rgba(120, 152, 35, 0.6)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
        return canvas;
      });
    }
  }
}).addTo(map);

Here is how the result looks like:

enter image description here

Here is working JSFiddle: https://jsfiddle.net/TomazicM/fgukvpbn/

2
  • I applied these two changes but it did not work (the chart is not wider). I tested in Chrome and Edge browser. Did you make any other changes? Dec 6, 2023 at 8:42
  • 1
    Added working JSFiddle to the answer.
    – TomazicM
    Dec 6, 2023 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.