Would you like to be able to plan your projects better? How about using a suitable Gantt chart to display the individual tasks in a project in relation to the schedule? Would you like to create this in Xojo? With the MBS Xojo ChartDirector Plugin, that's no problem.

First, we create three different arrays. One array contains the start times of the respective tasks and the second array contains the respective end times. The data is specified using the shared method CDBaseChartMBS.chartTime. Here, you can also enter hours, minutes, and seconds if necessary and for shorter time intervals. The last array contains the label, i.e., the name of the task.

This completes the setup of the data we want to process in the chart, and we can now focus on the chart itself. We create an object of the CDXYChartMBS class. This class creates our chart. First, we pass the size of the area that will not only accommodate our chart but also our title and other elements later on to the constructor. Then we specify the background color for this area. In our case, white. We can give the area a border. To do this, we can first specify the colors and then specify whether we want a 3D effect border or not. Since borders have become quite out of fashion in today's design, we choose white as the border color and choose not to apply a 3D effect.

Dim c As New CDXYChartMBS(620, 280, &hffffff, &hffffff, 0)

We then use the addTitle method to add a title to the chart. In this method, we first need the text and can then set the font, size, and color as desired. We use SetBackground to set the background color for the title. For our example, we set the font color to dark gray and left the background white.

c.addTitle("Simple Gantt Chart Demo", "arial.ttf", 15, &h333333).setBackground(&hfffffff)

Now let's move on to the chart itself. This is set using the setPlotArea method. Here we define the size and position of the chart on the area that has already been defined. We move the chart slightly to the right so that there is enough space for the labels on the left side. In addition, we specify the background color, which is white here, and an alternative background color that alternates with the normal background for better differentiation between areas. Here, we use a light gray. We can also adjust the color of the diagram's border and the horizontal and vertical lines. Here, too, we stick with a medium gray tone. We can adjust the thickness of the grid with setGridWidth; in our case, all lines have a line thickness of 1.

c.setPlotArea(140, 55, 460, 200, &hffffff, &heeeeee, &hcccccc, &hcccccc, &hcccccc).setGridWidth(1, 1, 1, 1)

Since we are actually working with a box-whisker plot here, the individual categories are next to each other instead of below each other, this is what we want to change. To do this, we can use the c.swapXY method, which swaps the two axis.

Now we need to specify the range in which the data on our axis moves. Our data is between August 16, 2025, and November 22, 2025. We enter this range as the data range on the y-axis using the setDateScale method (to avoid confusion, remember that we have swapped the axes but the scope remains the same). The last number is the distance between the marks on the y-axis. These should be 7 days apart. The unit of measurement on this axis is seconds. For this reason, we multiply the seconds in a day by 7.

c.swapXY
Call c.yAxis.setDateScale(c.chartTime(2025, 8, 16), c.chartTime(2025, 11, 22), 86400.0 * 7.0)

Now we want to set how the label on our y-axis should look. We do this with setMultiFormat. We want to display the months every 5 ticks in the form of the first three letters of the month, a space, and then the day. November 6th would therefore look like Nov 6. This is what this specification says {value|mmm d}. For the smaller subdivisions, the day is sufficient for orientation. This expression stands for it: -{value|d}

c.yAxis.setMultiFormat(CDXYChartMBS.StartOfMonthFilter,"<*font=arial.ttf*>{value|mmm d}", CDXYChartMBS.StartOfDayFilter, „-{value|d}“)

We want the labeling of the y-axis to be at the top. Since we are still in the rotated system, we specify setYAxisOnRight here, which rotates the axis so that it is at the top. By default, the color for our ticks and labels is black. To make the labels fit better into the overall design, we want to set the tick color to a medium gray with setTickColor and the axis color and label color to a darker gray. We do this for each axis individually, so you will see this construct again for the X axis.

c.setYAxisOnRight
c.yAxis.setTickColor &h999999
c.yAxis.setColors &h999999, &h555555

The labels are set on the x-axis. Currently, we have rotated the data so that the latest task is at the top. We want to change this and use setReverse to reverse the data in the diagram. If we leave the ticks in the default settings, we position them in the center of the bar data space, which would be confusing and unhelpful. For this reason, we set an offset of 0.5 for the tick positions using setTickOffset, which aligns them exactly with the bars.

call c.xAxis.setLabels(labels)
c.xAxis.setReverse
c.xAxis.setTickOffset(0.5)
c.xAxis.setTickColor &h999999
c.xAxis.setColors &h999999, &h555555

So far, we haven't inserted the data yet. Now we want to change that and insert the data. To do this, we need three arrays that are not assigned any values, but more on that in a moment. We now create the data bars using the addBoxWhiskerLayer method. In a box whisker diagram, we have the option of specifying maximum and minimum values in addition to the bars, which can appear as lines extending from the bars. In addition, a median value can also be displayed in the bar. This is not necessary here. For this reason, we set the values for the start and end data. For the maximum, minimum, and median values, which we do not need, we set the empty arrays. Now we need to add colors to the bars, which we will make a bold green. The whiskers, i.e., the lines to the min and max values, are not displayed, but they still need a color value, which we will set to white. We can also set a color for the border of our bars. In this example, we will use the same color as the bars themselves.

Dim m1(-1), m2(-1), m3(-1) As Double

Call c.addBoxWhiskerLayer(startDate, endDate, m1, m2, m3, &h00cc00, &hffffff, &h00cc00)

All we need to do now is display the diagram. We will display it in the background of the window. To do this, we will convert our diagram into an image.

Backdrop=c.makeChartPicture

Our chart can already be displayed in its entirety. To use ChartDirector without restrictions, you need a license. This will remove the yellow watermark below the chart. Luckily for you, the Omegabundle is currently available at a low price and includes a license for ChartDirector in addition to many other helpful tools from the Xojo world. Feel free to check out the Omegabundle. It's worth it.