title: Graph in popup and separate Div in Leaflet
body: <p>I wonder if anyone can tell me what is wrong in my code please? I want to be able to select a polygon and show a graph in a popup using leaflet and highchart. I have managed to create the graph in the popup, but the line is missing on it, and I also get a separate div showing the same chart (and the line) at the bottom of my web page which I don't want. Can anyone tell me how to get the line to show on the chart in the popup and to remove the separate chart? Here is my code.enter code here</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;Quick Start - Leaflet&lt;/title&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!--include leaflet CSS file--&gt;
  
      &lt;link rel="stylesheet" href="css/leaflet.css" /&gt;
      &lt;link rel="markers" type="images/marker-icon" href="images/marker-icon.png" /&gt;
  
  &lt;!--include Leaflet Javascript file--&gt;
  &lt;!-- Make sure you put this AFTER Leaflet's CSS --&gt;
  
      &lt;script src="js/leaflet.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src='http://unpkg.com/leaflet@1.0.2/dist/leaflet.js'&gt;&lt;/script&gt;
      &lt;script src="js/esri-leaflet.js"&gt;&lt;/script&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.highcharts.com/highcharts.src.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;!--Put a div element with a certain id where you want your map to be:  --&gt;
  
     &lt;div id="map" style="width: 1000px; height: 800px;"&gt;&lt;/div&gt;
     &lt;div id="chartcontainer" class="highchart" style="width: 500px; height: 200px;"&gt;&lt;/div&gt;
  
    &lt;!-- First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:--&gt;
    &lt;script&gt;
  
      var mymap = L.map('map', {
              zoomControl:true, maxZoom:28, minZoom:1
          }).fitBounds([[51.0269253989,-1.34762355597],[51.1990603009,-0.951310026203]]);
  
      L.esri.basemapLayer('Imagery').addTo(mymap);        
  
  //loads geoserver layer as WMS
   var field_boundaries = L.tileLayer.wms("http://localhost:1997/geoserver/RSAC/wms", {
      layers: 'RSAC:results_clipped_with_growth_small_new',
      format: 'image/png',
      transparent: true,
      version: '1.1.0',
      attribution: "myattribution"
      });
  
  
  //loads the geojson layer
      var owsrootUrl = 'http://localhost:1997/geoserver/RSAC/wms';
      var defaultParameters = {
          service : 'WFS',
          version : '2.0',
          request : 'GetFeature',
          typeName : 'RSAC:results_clipped_with_growth_small_new',
          outputFormat : 'json',
          format_options : 'callback:getJson',
          SrsName : 'EPSG:4326'
      };
  var parameters = L.Util.extend(defaultParameters);
  var URL = owsrootUrl + L.Util.getParamString(parameters);
  var ajax = $.ajax({
      url : URL,
      dataType : 'json',
      jsonpCallback : 'getJson',
      success : function (response) {
      L.geoJson(response, {
          onEachFeature: function (feature, url) {
          url.on('click', function(e){
  
                      var chartplotoptions ={
                          chart: {
                              type: 'line'
                          },
                          title: {
                              text: 'Growth'
                          },
  
                          xAxis: {
                              allowDecimals: true,
                              categories: ['20151114', '20151126', '20151208', '20151220', '20160113', '20160125', '20160206', '20160218', '20160301', '20160313', '20160325', '20160406', '20160418', '20160430', '20160512', '20160524', '20160605', '20160629', '20160723', '20160804', '20160816'],
                              labels: {
                                  formatter: function () {
                                      return this.value; 
                                  }
                              }
                          },
                          yAxis: {
                                  startOnTick: false,
                                  minPadding: 0.05,
                              title: {
                                  text: 'Crop Growth',
  
                              },
                              labels: {
                                  formatter: function () {
                                      return this.value;
                                  }
                              }
                          },
                          tooltip: {
                              pointFormat: '{series.name}{point.y}'
                          },
                          plotOptions: {
  
                                  area: {
                                  pointStart: -20,
                                  threshold: 10,
                                  marker: {
                                      enabled: false,
                                      symbol: 'circle',
                                      radius: 2,
                                      states: {
                                          hover: {
                                              enabled: false
                                          }
                                      }
                                  }
                              }
                          },
                          series: [{
                              name: 'Growth',
                              data: [parseFloat(feature.properties.Date_20151114),parseFloat(feature.properties.Date_20151126),parseFloat(feature.properties.Date_20151208), parseFloat(feature.properties.Date_20151220), parseFloat(feature.properties.Date_20160113), parseFloat(feature.properties.Date_20150125), parseFloat(feature.properties.Date_20160206), parseFloat(feature.properties.Date_20160218), parseFloat(feature.properties.Date_20160301), parseFloat(feature.properties.Date_20160313), parseFloat(feature.properties.Date_20160325), parseFloat(feature.properties.Date_20160406), parseFloat(feature.properties.Date_20160418), parseFloat(feature.properties.Date_20160430), parseFloat(feature.properties.Date_20160512), parseFloat(feature.properties.Date_20160524), parseFloat(feature.properties.Date_20160605), parseFloat(feature.properties.Date_20160629), parseFloat(feature.properties.Date_20160723), parseFloat(feature.properties.Date_20160804), parseFloat(feature.properties.Date_20160816)]
                          }, 
  
                          ]
                      };
  
  
                      $('#chartcontainer').highcharts(chartplotoptions);
                      url.bindPopup($('#chartcontainer').html());
                      url.openPopup();  
                      });
                  }
  
               }).addTo(mymap);
           }
       });     
  
    &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>