Trouble gettings CanvasJS to color just the coordinates in the tooltip

Question

The tooltip text:

10 Dataseries 1: 71 Dataseries 2: 77

I'm trying to get the tooltip so the Dataseries 1: and Dataseries 2: remain their current color, and the 10, 71, and 77 are colored red. I have tried toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ", but it doesn't change anything. I'm sure its a stupid mistake on my part, but I'm new to using CanvasJS and haven't been able to get anything to work. (https://jsfiddle.net/lightmaster/8p3ygwf1/)

var chart = new CanvasJS.Chart("chartContainer", {
  backgroundColor: "RGBA(37, 41, 45, 0.9)",
  animationEnabled: true,

  title: {
    text: " ",
    fontSize: 11,
    fontColor: ' #ccc',
    fontFamily: "arial",
  },

  toolTip: {
    fontStyle: "normal",
    cornerRadius: 4,
    backgroundColor: "RGBA(37, 41, 45, 0.9)",
    toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
    shared: true,
  },

  axisX: {
    gridColor: "RGBA(64, 65, 66, 0.8)",
    labelFontSize: 10,
    labelFontColor: ' #ccc',
    lineThickness: 1,
    gridThickness: 1,
    gridDashType: "dot",
    titleFontFamily: "arial",
    labelFontFamily: "arial",
    interval: "auto",
    intervalType: "hour",
    minimum: 0,
    crosshair: {
      enabled: true,
      snapToDataPoint: true,
      color: "#9aba2f",
      labelFontColor: "#ccc",
      labelFontSize: 14,
      labelBackgroundColor: "#FF8841",
    }
  },

  axisY: {
    title: "Temperature (°F) Recorded",
    titleFontColor: "#ccc",
    titleFontSize: 10,
    titleWrap: false,
    margin: 10,
    lineThickness: 1,
    gridThickness: 1,
    gridDashType: "dot",
    includeZero: false,
    gridColor: "RGBA(64, 65, 66, 0.8)",
    labelFontSize: 11,
    labelFontColor: ' #ccc',
    titleFontFamily: "arial",
    labelFontFamily: "arial",
    labelFormatter: function(e) {
      return e.value.toFixed(0) + " °F ";
    },
    crosshair: {
      enabled: true,
      snapToDataPoint: true,
      color: "#9aba2f",
      labelFontColor: "#fff",
      labelFontSize: 12,
      labelBackgroundColor: "#FF8841",
      valueFormatString: "#0.# °F",
    }
  },

  legend: {
    fontFamily: "arial",
    fontColor: "#ccc",

  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    },
    {
      type: "spline",
      dataPoints: [
        { x: 10, y: 77 },
        { x: 20, y: 53 },
        { x: 30, y: 58 },
        { x: 40, y: 61 },
        { x: 50, y: 99 },
        { x: 60, y: 60 },
        { x: 70, y: 20 },
        { x: 80, y: 31 },
        { x: 90, y: 26 }
      ]
    }
  ]
});

chart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Answer 1

At the chart level, instead of toolTipContent you need content. Your toolTipContent code is currently being ignored because that's the property used only at the data level. Here is how you can set a style directly, doing basically what you asked for:

toolTip: {
  fontStyle: "normal",
  cornerRadius: 14,
  backgroundColor: "RGBA(37, 41, 45, 0.9)",
  content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
  shared: true,
}

Because you are using shared: true, your x value will show up twice. If you don't want that, look into the contentFormatter function for Shared toolTip section in the docs.