Is it possible to align the asterisk in my chart with the second digit of the day on the X axis?

Question

I am working in a console app and trying to plot a chart in C# console, but I cannot align the mark with the values on the X axis, i tried adding spacing to the asterisk but nothing, any ideas? I am supposed to do it with loops

Ideally I would like to print the marks above the second digit of the values on the X axis

this is the data stored in the arrays values[] and dates[] as a reference

Date,       values 
10-21-2023, 12.3
10-22-2023, 11.9
10-23-2023, 13.6
10-24-2023, 11.9
10-25-2023, 10.8

this is my code:

 static void PlotGraph(double[] values, string[] dates, int counter)
}

     foreach (var value in distincthValues)
     {
         //print pH values in the Y-axis
         Console.Write($"{value:0.0}| ");

         for (int i = 0; i < count; i++)
         {
             if (values[i] == value)
             {
                 3748("  * ");
             } 
             else
             {
                 Console.Write("  ");
             }
         }
         Console.WriteLine();
     }

     Console.WriteLine("----------------------");
     Console.Write("Day|  ");
     
     for (int i = 0; i < counter; i++)
     {
         Console.Write($"{dates[i].Substring(3, 2)}  ");
     }

     Console.ReadLine();


 }

and this is what i get:

13.6|     *
12.3| *
11.9|   *   *
10.8|         *
0.0|
----------------------
Day|  21  22  23  24  25

Answer 1

The second digits of the dates on the X axis are all 3 characters apart from each other. After you aligned the Y axis, all you need to do is repeatedly print a space/star followed by 3 spaces.

To align the Y axis, you can just find its width by finding the ph value that has the most characters (of course, there are faster ways if you know the values must be in some range):

var yAxisWidth = distinctPhValues
    .Select(x => $"{x:0.0}".Length).Max();

Then, you can use PadLeft (or PadRight if you want left-alignment) to print the ph values.

foreach (var value in distinctPhValues)
{
    //print pH values in the Y-axis
    Console.Write($"{value:0.0}".PadLeft(yAxisWidth));
    Console.Write("|  "); // note I added an extra space here to account for the first digit of the first date
    for (int i = 0; i < pHValues.Length; i++)
    {
        if (pHValues[i] == value)
        {
            Console.Write("*");
        } 
        else
        {
            Console.Write(" ");
        }
        Console.Write("   "); // the stars are all 3 spaces apart from each other
    }
    Console.WriteLine();
}

The length of the xAxis is easy to calculate - multiply dates.Length with however many characters each date takes up (i.e. 4), and add the width of the Y axis to it

Console.WriteLine(new string('-', yAxisWidth + 4 * dates.Length));
Console.Write("Day".PadLeft(yAxisWidth));
Console.Write("| ");

for (int i = 0; i < dates.Length; i++)
{
    // consider actually using a DateTime/DateOnly instead of strings to represent dates
    // then you can do:
    // Console.Write($"{dates[i].Day,2}  ");
    Console.Write($"{dates[i].Substring(3, 2)}  ");
}

Example Usage:

DisplayChart(
    new double[] {
        12.3, 11.9, 13.6, 11.9, 10.8
    },
    new string[] {
        "10-21-2023",
        "10-22-2023",
        "10-23-2023",
        "10-24-2023",
        "10-25-2023",
    }
);

Example Output:

13.6|          *           
12.3|  *                   
11.9|      *       *       
10.8|                  *   
------------------------
 Day| 21  22  23  24  25