Gantt chart for single day milestone

Question

I have implemented Gantt chart using Amcharts 3, which is working good but in my case, I need to show single date milestone as well. It is showing milestone as very thin line which is not view able. I would like to show some other objects (square, diamond) for single day milestone instead of bar.

Fiddle

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "gantt",
  "theme": "light",
  "marginRight": 70,
  "period": "DD",
  "dataDateFormat": "YYYY-MM-DD",
  "columnWidth": 0.5,
  "valueAxis": {
    "type": "date"   
  },
  "brightnessStep": 7,
  "graph": {
    "fillAlphas": 1,
    "lineAlpha": 1,
    "lineColor": "#fff",
    "fillAlphas": 0.85,
    "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
  },
  "rotate": true,
  "categoryField": "category",
  "segmentsField": "segments",
  "colorField": "color",
  "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
    "category": "Module #1",
    "segments": [ {
      "start": "2018-03-01",
      "end": "2018-03-01",
      "color": "#b9783f",
      "task": "Gathering requirements"
    }, {
      "start": "2018-06-27",
      "end": "2018-06-27",
      "task": "Producing specifications"
    }, {
      "start": "2018-07-18",
      "end": "2018-07-18",
      "task": "Development"
    }, {
      "start": "2018-07-20",
      "end": "2018-07-20",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #2",
    "segments": [ {
      "start": "2018-04-08",
      "end": "2018-04-08",
      "color": "#cc4748",
      "task": "Gathering requirements"
    }, {
      "start": "2018-07-15",
      "end": "2018-07-15",
      "task": "Producing specifications"
    }, {
      "start": "2018-08-16",
      "end": "2018-08-16",
      "task": "Development"
    }, {
      "start": "2018-09-10",
      "end": "2018-09-10",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #3",
    "segments": [ {
      "start": "2018-01-02",
      "end": "2018-01-02",
      "color": "#cd82ad",
      "task": "Gathering requirements"
    }, {
      "start": "2018-03-08",
      "end": "2018-03-08",
      "task": "Producing specifications"
    }, {
      "start": "2018-04-19",
      "end": "2018-04-19",
      "task": "Development"
    }, {
      "start": "2018-05-05",
      "end": "2018-05-05",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #4",
    "segments": [ {
      "start": "2018-04-01",
      "end": "2018-04-01",
      "color": "#2f4074",
      "task": "Gathering requirements"
    }, {
      "start": "2018-05-03",
      "end": "2018-05-03",
      "task": "Producing specifications"
    }, {
      "start": "2018-06-20",
      "end": "2018-06-20",
      "task": "Development"
    }, {
      "start": "2018-08-15",
      "end": "2018-08-15",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #5",
    "segments": [ {
      "start": "2018-01-12",
      "end": "2018-01-12",
      "color": "#448e4d",
      "task": "Gathering requirements"
    }, {
      "start": "2018-02-19",
      "end": "2018-02-19",
      "task": "Producing specifications"
    }, {
      "start": "2018-05-19",
      "end": "2018-05-19",
      "task": "Development"
    }, {
      "start": "2018-04-08",
      "end": "2018-04-08",
      "task": "Testing and QA"
    } ]
  } ],
  "valueScrollbar": {
    "autoGridCount": true
  },
  "chartCursor": {
    "cursorColor": "#55bb76",
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0,
    "valueLineAlpha": 0.5,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "zoomable": false,
    "valueZoomable": true
  },
  "export": {
    "enabled": true
  }
} );

How can I override this case?

Answer 1

You could add bullets with diamonds or other shapes, including custom images. Below is a demo that uses diamond bullets:

"graph": {
    ...
    "bulletField": "bullet",
    "bulletSize": 8
},

https://www.amcharts.com/docs/v3/tutorials/using-bullets-gantt-chart/ Another way to make the lines more noticeable is by increasing the border/stroke property

lineThickness:
"graph": {
    ...
    "lineThickness": 10,
You could also change the end dates to make the segments stretch over multiple days, but use a custom baloonFunction to show only the start day:
    "category": "Module #1",
    "segments": [ {
      "start": "2018-03-01",
      "end": "2018-03-03",
...

"graph": {
    "fillAlphas": 1,
    "lineAlpha": 1,
    "lineColor": "#fff",
    "fillAlphas": 0.85,
    //"balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]",
    "balloonFunction": function (graphDataItem, graph) {

      var item = graph.segmentData;

      return "Custom balloon: <b> <br >" + item.task +
        "</b><br />"  + item.start ;
    }
},