I tried to create my chart using leaflet and caught an error that say L.minichart is not a function. And here is my script : Answer You have not imported the library. Include it inside the head tag after importing leaftet css and js:

Uncaught TypeError: L.minichart is not a function (Leaflet Piechart)

I tried to create my chart using leaflet and caught an error that say L.minichart is not a function. And here is my script :

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>

<script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script>
<script src="assets/js/leaflet.ajax.js"></script>

   <script type="text/javascript">
    var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
    var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});
    map.addLayer(LayerKita);
    
    // script pie chart coba dari github
    var options = {
    data: {
        'dataPoint1': 5 * 20,
        'dataPoint2': 7 * 20,
        'dataPoint3': 9 * 20,
        'dataPoint4': 3 * 20
    },
    chartOptions: {
        'dataPoint1': {
            fillColor: '#FEE5D9',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint2': {
            fillColor: '#FCAE91',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint3': {
            fillColor: '#FB6A4A',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint4': {
            fillColor: '#CB181D',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        }
    },
    weight: 1,
    color: '#000000',
    
    }
     
var barChartMarker = L.minichart([-7.900886,110.073918], {data: [1, 2, 3], maxValues: 3});

map.addLayer(barChartMarker);
   </script>

JavaScript
​x
 
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>
​
<script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script>
<script src="assets/js/leaflet.ajax.js"></script>
​
   <script type="text/javascript">
    var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
    var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});
    map.addLayer(LayerKita);
    
    // script pie chart coba dari github
    var options = {
    data: {
        'dataPoint1': 5 * 20,
        'dataPoint2': 7 * 20,
        'dataPoint3': 9 * 20,
        'dataPoint4': 3 * 20
    },
    chartOptions: {
        'dataPoint1': {
            fillColor: '#FEE5D9',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint2': {
            fillColor: '#FCAE91',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint3': {
            fillColor: '#FB6A4A',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        },
        'dataPoint4': {
            fillColor: '#CB181D',
            minValue: 0,
            maxValue: 20,
            maxHeight: 20,
            displayText: function (value) {
                return value.toFixed(2);
            }
        }
    },
    weight: 1,
    color: '#000000',
    
    }
     
var barChartMarker = L.minichart([-7.900886,110.073918], {data: [1, 2, 3], maxValues: 3});
​
map.addLayer(barChartMarker);
   </script>
​

Answer

You have not imported the library. Include it inside the head tag after importing leaftet css and js:

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
</head>

JavaScript
 
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
</head>
​

<!DOCTYPE html>
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>

</head>

<body>



  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
    var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
    });
    map.addLayer(LayerKita);

    // script pie chart coba dari github
    var options = {
      data: {
        'dataPoint1': 5 * 20,
        'dataPoint2': 7 * 20,
        'dataPoint3': 9 * 20,
        'dataPoint4': 3 * 20
      },
      chartOptions: {
        'dataPoint1': {
          fillColor: '#FEE5D9',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint2': {
          fillColor: '#FCAE91',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint3': {
          fillColor: '#FB6A4A',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint4': {
          fillColor: '#CB181D',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        }
      },
      weight: 1,
      color: '#000000',

    }

    var barChartMarker = L.minichart([-7.900886, 110.073918], {
      data: [1, 2, 3],
      maxValues: 3
    });

    map.addLayer(barChartMarker);
  </script>



</body>

</html>

JavaScript
 
<!DOCTYPE html>
<html>
​
<head>
​
  <title>Quick Start - Leaflet</title>
​
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
​
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
​
</head>
​
<body>
​
​
​
  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var map = L.map('mapid').setView([-7.7951371, 110.1039079], 11);
    var LayerKita = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
    });
    map.addLayer(LayerKita);
​
    // script pie chart coba dari github
    var options = {
      data: {
        'dataPoint1': 5 * 20,
        'dataPoint2': 7 * 20,
        'dataPoint3': 9 * 20,
        'dataPoint4': 3 * 20
      },
      chartOptions: {
        'dataPoint1': {
          fillColor: '#FEE5D9',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint2': {
          fillColor: '#FCAE91',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint3': {
          fillColor: '#FB6A4A',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        },
        'dataPoint4': {
          fillColor: '#CB181D',
          minValue: 0,
          maxValue: 20,
          maxHeight: 20,
          displayText: function(value) {
            return value.toFixed(2);
          }
        }
      },
      weight: 1,
      color: '#000000',
​
    }
​
    var barChartMarker = L.minichart([-7.900886, 110.073918], {
      data: [1, 2, 3],
      maxValues: 3
    });
​
    map.addLayer(barChartMarker);
  </script>
​
​
​
</body>
​
</html>

Advertisement

Answer