CanvasJS, show different values on x-axis label and datapoint label

Question

I'm working with a CanvasJS spline graph. Working on the x-axis data, I want to have the x-axis label below the graph showing preset numbers while the datapoints mouseover function should show a date. In the picture below, when I hover on a data point I would like it to show a date for the x-axis label. So it should look something like (2022-09-20: 344) instead of (4: 344).

Index label shows data above every data point, I don't want that. The mouseover function canvajs has might do the trick, but their example uses alert().

dataPoints: [
   { x: 10,   y: 71,   mouseover: function(e){
          alert(  e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );   },
   },
 ]

I'd like to have their original mouseover function just with different data if possible.

Currently my data points are set from a loop and look like this:

data = [
  {
    type: "spline",
    name: Object.keys(tix_data)[0],
    color: color_arr[i] // (array of colors),
    showInLegend: true,
    axisYIndex: axisYIndex // (this is a variable set elsewhere),
    dataPoints: {"y" => someDollarAmount, "label" => i, "name" => someDate}, // etc...
  }
]

Where "name" is where I want my date value to go, it just doesn't work as I want it to.

My chart function is currently set up like this:

const chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Market price from days to event"
            },
            axisY: [{
                title: "Market Price",
                lineColor: "#C24642",
                tickColor: "#C24642",
                labelFontColor: "#C24642",
                titleFontColor: "#C24642",
                prefix: "$"
            }],
            axisX: [{
                title: "Days to event",
                reversed:  true
            }],
            data: data
        });

I was able to figure somewhat of a solution, the details are in my comment below, but here is an image of the outcome:

Answer 1

You can show custom content in tooltip by setting tooltipContent & regular numbers in the axis labels. Below is an example.

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Market price from days to event"
  },
  axisY: [{
    title: "Market Price",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642",
    prefix: "$"
  }],
  axisX: [{
    title: "Days to event",
    reversed:  true
  }],
  data: [{
    type: "spline",
    toolTipContent: "<span style='\"'color: {color};'\";'>{toolTipX}</span>: {y}",
    dataPoints: [
      { toolTipX: "Jan 1, 2023", x: 1, y: 650 },
      { toolTipX: "Jan 2, 2023", x: 2, y: 700 },
      { toolTipX: "Jan 3, 2023", x: 3, y: 710 },
      { toolTipX: "Jan 4, 2023", x: 4, y: 658 },
      { toolTipX: "Jan 5, 2023", x: 5, y: 734 },
      { toolTipX: "Jan 6, 2023", x: 6, y: 963 },
      { toolTipX: "Jan 7, 2023", x: 7, y: 847 },
      { toolTipX: "Jan 8, 2023", x: 8, y: 853 },
      { toolTipX: "Jan 9, 2023", x: 9, y: 869 },
      { toolTipX: "Jan 10, 2023", x: 10, y: 943 },
      { toolTipX: "Jan 11, 2023", x: 11, y: 970 },
      { toolTipX: "Jan 12, 2023", x: 12, y: 869 },
      { toolTipX: "Jan 13, 2023", x: 13, y: 890 },
      { toolTipX: "Jan 14, 2023", x: 14, y: 930 }
    ]
  }]
});
chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 320px; width: 100%;"></div>