Line With Custom Bullets

Besides a bunch of predefined bullets (our charts support round, square, triangle, bubble, diamond bullet shapes) you can use your own images as bullets of your graphs. You can set one bullet for all the graph and also use individual bullets for specific data points to indicate some difference of these plots.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",

    "dataProvider": [
        {
            "data": "jan",
            "value": 5
        },{
            "data": "fev",
            "value": 26
        }
    ],

    "valueAxes": [{
        "axisAlpha": 0,
        "dashLength": 4,
        "position": "left"
    }],
    "graphs": [{
        "bulletSize": 14,
        "customBullet": "https://www.amcharts.com/lib/3/images/star.png?x",
        "customBulletField": "customBullet",
        "valueField": "value",
        "balloonText": "<div style='margin:10px; text-align:left;'><span style='font-size:13px'>[[category]]</span><br><span style='font-size:18px'>Value:[[value]]</span>",
    }],
    "marginTop": 20,
    "marginRight": 70,
    "marginLeft": 40,
    "marginBottom": 20,
    "chartCursor": {
        "graphBulletSize": 1.5,
        "zoomable": false,
        "valueZoomable": true,
        "cursorAlpha": 0,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "valueLineAlpha": 0.2
    },
    "autoMargins": false,
    //"dataDateFormat": "YYYY-MM-DD",
    "categoryField": "data",
    "valueScrollbar": {
        "offset": 30
    },
    "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "gridAlpha": 0,
        "inside": true,
        "tickLength": 0
    },
    "export": {
        "enabled": true
    }
});