You only need this lines in order to see a pop up in the chart.
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
</head>
<body>
<!-- Aframe scene -->
<a-scene background="color: grey">
<!-- Aframe light -->
<a-light type="point" intensity="1" position="-2 10 10"></a-light>
<!-- Declaring chart component -->
<a-entity charts="type: bar; dataPoints: ../data/dataPopUp.json; axis_text_color: black; show_popup_info: true"></a-entity>
<!-- Aframe camera -->
<a-entity position="2 10 14" rotation="-30 15 0">
<a-camera position="3 -1 4" rotation="0 -1 0">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
</a-scene>
</body>JSON input example
[
{"x": 1, "y": 8, "z": 0, "size": 1, "color": "#ff0000", "label": "Japan"},
{"x": 2, "y": 7, "z": 7, "size": 1.5, "color": "#0000ff", "label": "USA"},
{"x": 1, "y": 6, "z": 3, "size": 1, "color": "#4CC3D9", "label": "Mexico"},
{"x": 3, "y": 4, "z": 1, "size": 1.5, "color": "#EF2D5E", "label": "Spain"},
{"x": 2, "y": 1, "z": 5, "size": 1, "color": "#ff0000", "label": "Italy"},
{"x": 1, "y": 10, "z": 6, "size": 1.5, "color": "#00ff00", "label": "Australia"},
{"x": 3, "y": 5, "z": 0, "size": 1, "color": "#ff0000", "label": "UK"},
{"x": 5, "y": 9, "z": 1, "size": 1, "color": "#0000ff", "label": "Germany"},
{"x": 6, "y": 4, "z": 10, "size": 1.5, "color": "#0000ff", "label": "Portugal"},
{"x": 9, "y": 7, "z": 2, "size": 1.5, "color": "#EF2D5E", "label": "Colombia"},
{"x": 5, "y": 0, "z": 6, "size": 1, "color": "#ff0000", "label": "Peru"},
{"x": 5, "y": 9, "z": 4, "size": 1.5, "color": "#00ff00", "label": "China"},
{"x": 6, "y": 6, "z": 1, "size": 1, "color": "#ff0000", "label": "India"},
{"x": 4, "y": 2, "z": 5, "size": 1, "color": "#0000ff", "label": "Afghanistan"},
{"x": 7, "y": 1, "z": 8, "size": 1.5, "color": "#0000ff", "label": "Morocco"},
{"x": 1, "y": 4, "z": 3, "size": 1, "color": "#4CC3D9", "label": "Greece"},
{"x": 8, "y": 6, "z": 4, "size": 1.5, "color": "#EF2D5E", "label": "Ireland"},
{"x": 9, "y": 6, "z": 3, "size": 1, "color": "#ff0000", "label": "Russia"},
{"x": 3, "y": 9, "z": 3, "size": 1.5, "color": "#00ff00", "label": "Canada"}
]