title: How to customize the fusion Gantt chart?
body: <p>I am trying to implement Gantt Chart in Fusion Chart. But, I am not able to find few customizing options. Following are the options I require to implement on the Fusion Gantt Chart,</p>
  <ol>
  <li>How to customize  or reduce the size of the milestone?</li>
  <li>How to customize the Y-axis data label as hyperlink? [with reference to picture, the labels such as Identify Customers, Survey 500 customers, etc. must be an hyperlink which will help us to drilldown to data level information]</li>
  <li>Is there any possible way to change the shape of the milestone to triangle other than polygon or star?</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/8TtSD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8TtSD.png" alt="I tried implementing this" /></a></p>
  <pre><code>    FusionCharts.ready(function() {
    var smoPlan = new FusionCharts({
      type: 'gantt',
      renderAt: 'chart-container',
      width: '750',
      height: '500',
      dataFormat: 'json',
      dataSource: {
        &quot;chart&quot;: {
          &quot;theme&quot;: &quot;fusion&quot;,
          &quot;dateformat&quot;: &quot;mm/dd/yyyy&quot;,
          &quot;caption&quot;: &quot;Social Media Optimization&quot;,
          &quot;captionFontSize&quot;: &quot;14&quot;,
          &quot;subCaption&quot;: &quot;Project Plan&quot;,
          &quot;subCaptionFontSize&quot;: &quot;12&quot;,
          &quot;milestoneFont&quot;: &quot;Times New Roman&quot;,
          &quot;milestoneFontSize&quot;: &quot;15&quot;,
           &quot;labelLink&quot;: &quot;http://www.fusioncharts.com/&quot;
        },
        &quot;categories&quot;: [{
          &quot;category&quot;: [{
            &quot;start&quot;: &quot;08/01/2014&quot;,
            &quot;end&quot;: &quot;08/31/2014&quot;,
            &quot;label&quot;: &quot;Aug '14&quot;
          }, {
            &quot;start&quot;: &quot;09/01/2014&quot;,
            &quot;end&quot;: &quot;09/30/2014&quot;,
            &quot;label&quot;: &quot;Sep '14&quot;
          }, {
            &quot;start&quot;: &quot;10/01/2014&quot;,
            &quot;end&quot;: &quot;10/31/2014&quot;,
            &quot;label&quot;: &quot;Oct '14&quot;
          }, {
            &quot;start&quot;: &quot;11/01/2014&quot;,
            &quot;end&quot;: &quot;11/30/2014&quot;,
            &quot;label&quot;: &quot;Nov '14&quot;
          }, {
            &quot;start&quot;: &quot;12/01/2014&quot;,
            &quot;end&quot;: &quot;12/31/2014&quot;,
            &quot;label&quot;: &quot;Dec '14&quot;
          }, {
            &quot;start&quot;: &quot;01/01/2015&quot;,
            &quot;end&quot;: &quot;01/31/2015&quot;,
            &quot;label&quot;: &quot;Jan '15&quot;
          }, {
            &quot;start&quot;: &quot;02/01/2015&quot;,
            &quot;end&quot;: &quot;02/28/2015&quot;,
            &quot;label&quot;: &quot;Feb '15&quot;
          }, {
            &quot;start&quot;: &quot;03/01/2015&quot;,
            &quot;end&quot;: &quot;03/31/2015&quot;,
            &quot;label&quot;: &quot;Mar '15&quot;
          }]
        }],
        &quot;processes&quot;: {
          &quot;fontsize&quot;: &quot;12&quot;,
          &quot;isbold&quot;: &quot;1&quot;,
          &quot;align&quot;: &quot;left&quot;,
          &quot;process&quot;: [{
            &quot;label&quot;: &quot;Identify Customers&quot;
          }, {
            &quot;label&quot;: &quot;Survey 500 Customers&quot;
          }, {
            &quot;label&quot;: &quot;Interpret Requirements&quot;
          }, {
            &quot;label&quot;: &quot;Market Analysis&quot;
          }, {
            &quot;label&quot;: &quot;Brainstorm concepts&quot;
          }, {
            &quot;label&quot;: &quot;Define Ad Requirements&quot;
          }, {
            &quot;label&quot;: &quot;Design &amp; Develop&quot;
          }, {
            &quot;label&quot;: &quot;Mock test&quot;
          }, {
            &quot;label&quot;: &quot;Documentation&quot;
          }, {
            &quot;label&quot;: &quot;Start Campaign&quot;
          }]
        },
        &quot;tasks&quot;: {
          &quot;task&quot;: [{
            &quot;id&quot;: &quot;1&quot;,
            &quot;start&quot;: &quot;08/04/2014&quot;,
            &quot;end&quot;: &quot;08/10/2014&quot;,
            &quot;color&quot;: &quot;#000000&quot;,
          }, {
            &quot;id&quot;: &quot;2&quot;,
            &quot;start&quot;: &quot;08/08/2014&quot;,
            &quot;end&quot;: &quot;08/19/2014&quot;
          }, {
            &quot;id&quot;: &quot;3&quot;,
            &quot;start&quot;: &quot;08/19/2014&quot;,
            &quot;end&quot;: &quot;09/02/2014&quot;
          }, {
            &quot;id&quot;: &quot;4&quot;,
            &quot;start&quot;: &quot;08/24/2014&quot;,
            &quot;end&quot;: &quot;09/02/2014&quot;
          }, {
            &quot;id&quot;: &quot;5&quot;,
            &quot;start&quot;: &quot;09/02/2014&quot;,
            &quot;end&quot;: &quot;09/21/2014&quot;
          }, {
            &quot;id&quot;: &quot;6&quot;,
            &quot;start&quot;: &quot;09/21/2014&quot;,
            &quot;end&quot;: &quot;10/06/2014&quot;
          }, {
            &quot;id&quot;: &quot;7&quot;,
            &quot;start&quot;: &quot;10/06/2014&quot;,
            &quot;end&quot;: &quot;01/21/2015&quot;
          }, {
            &quot;id&quot;: &quot;8&quot;,
            &quot;start&quot;: &quot;01/21/2015&quot;,
            &quot;end&quot;: &quot;02/19/2015&quot;
          }, {
            &quot;id&quot;: &quot;9&quot;,
            &quot;start&quot;: &quot;01/28/2015&quot;,
            &quot;end&quot;: &quot;02/24/2015&quot;
          }, {
            &quot;id&quot;: &quot;10&quot;,
            &quot;start&quot;: &quot;02/24/2015&quot;,
            &quot;end&quot;: &quot;03/27/2015&quot;
          }]
        },
        //Adding milestones to task with id 7 and 10
        &quot;milestones&quot;: {
          &quot;milestone&quot;: [{
            &quot;date&quot;: &quot;1/21/2015&quot;,
            &quot;taskid&quot;: &quot;7&quot;,
            &quot;color&quot;: &quot;#f8bd19&quot;,
            &quot;shape&quot;: &quot;star&quot;,
            &quot;tooltext&quot;: &quot;Successful Completion of Development&quot;,
            &quot;label&quot;: &quot;Development Complete&quot;,
            &quot;color&quot;: &quot;#587B17&quot;
          }, {
            &quot;date&quot;: &quot;3/28/2015&quot;,
            &quot;taskid&quot;: &quot;10&quot;,
            &quot;color&quot;: &quot;#f8bd19&quot;,
            &quot;shape&quot;: &quot;star&quot;,
            &quot;tooltext&quot;: &quot;Successful Completion of Campaign&quot;,
            &quot;label&quot;: &quot;Campaign Complete&quot;,
            &quot;color&quot;: &quot;#4838D2&quot;
          }]
        }
  
  
      }
    }).render();
  });
  
  HTML Code
   --&gt;
  &lt;div id=&quot;chart-container&quot;&gt;FusionCharts will render here&lt;/div&gt;
  </code></pre>