javascripthtmlbootstrap-4gantt-chartanychart

anychart: Gantt Charts are getting clipped/trimmed from right

I am using anychart for my UI. My Data timelines are in epoch milliseconds. While arranging them to have a Gantt chart, I see the right side is getting trimmed. Kindly help.

enter image description here

 <script type="text/javascript">

    anychart.onDocumentReady(function () {
        var data =  [

          {
            id: "1_1",
            name: "Analysis",
            actualStart: new Date(1664849423000),
            actualEnd: new Date(1664849745000),
            progressValue: "100%"
          },
          {
            id: "1_2",
            name: "Design",
            actualStart: new Date(1664767925000),
            actualEnd: new Date(1664769005000)
          },....]
// create a chart
    var chart = anychart.ganttProject();
    // set the data
    //chart.data(treeData);
    chart.data(data, 'as-table');
    // set the container id
    chart.container("chart-div");
    //chart.xScroller(true);
    chart.draw();
    // fit elements to the width of the timeline
    chart.fitAll();
    });
    </script>

JsFiddle Link: Sample Gantt Chart

Solution

  • You could fix that if you give your xScale a maximum with this line of code before calling chart.draw():

    chart.xScale().maximum(Date.UTC(2022, 9, 5));

    Here is your snippet without any modification, except this little addition:

    anychart.onDocumentReady(function () {
        var data =  [

          {
            id: "1_1",
            name: "Analysis",
            actualStart: new Date(1664849423000),
            actualEnd: new Date(1664849745000),
            progressValue: "100%"
          },
          {
            id: "1_2",
            name: "Design",
            actualStart: new Date(1664767925000),
            actualEnd: new Date(1664769005000)
          },
          {
            id: "1_3",
            name: "Meeting",
            actualStart: new Date(1664849781000),
            actualEnd: new Date(1664849787000)
          },
          {
            id: "1_4",
            name: "Implementation",
            actualStart: new Date(1664849907000),
            actualEnd: new Date(1664849918000)
          },
          {
            id: "1_5",
            name: "Testing",
            actualStart: new Date(1664589005000),
            actualEnd: new Date(1664589125000),
            progressValue: "20%"
          }

    ]
        //var treeData = anychart.data.tree(data, "as-tree");
    // create a chart
    var chart = anychart.ganttProject();
    // set the data
    //chart.data(treeData);
    chart.data(data, 'as-table');
    // set the container id
    chart.container("container");
    //chart.xScroller(true);
    chart.xScale().maximum(Date.UTC(2022, 9, 5)); // <--- HERE
    chart.draw();
    // fit elements to the width of the timeline
    chart.fitAll();
    });
    html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js" type="text/javascript"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-gantt.min.js" type="text/javascript"></script>
<div id="container"></div>