How to Underline & Strikethrough Text in CanvasJS Charts?

CanvasJS is a versatile JavaScript charting library enabling developers to craft engaging and dynamic charts for web applications. While it provides extensive customization options, sometimes you may need to enhance text elements like titles, labels, or annotations. You can achieve this is by utilizing Unicode characters to incorporate underlining and strikethrough effects effortlessly.

In this tutorial, we’ll explore how to underline and strikethrough text in CanvasJS charts using Unicode characters, specifically the Unicode characters U+0332 (combining low line) for underlining and U+0336 (combining long stroke overlay) for strikethrough.

Implementation

1. Include CanvasJS Library: If you haven’t already, include the CanvasJS library in your HTML file. You can either download it and include it locally or use a CDN.
2. Create a Chart: Set up your CanvasJS chart as you normally would, including data, axes, titles, etc.
3. Customize Text with Unicode Characters:

• Underline Text: To underline text, append the Unicode character U+0332 (combining low line) to the text you want to underline.
• Strikethrough Text: Similarly, to add a strikethrough effect, append the Unicode character U+0336 (combining long stroke overlay) to the text.

function decorateText(text, decoration) {
  var decoratedText = decoration === "underline" ? "\u0332" : "\u0336";
  for(var i = 0; i < text.length; i++) {
    decoratedText += (text[i] + (decoration === "underline" ? "\u0332" : "\u0336"));
  }  
  return decoratedText;
}

4. Render the Chart: Finally, render the chart using the render() method.

Below is a simple example demonstrating how to underline the chart title and strikethrough the legend when the the dataseries is toggled:

JSFiddle: https://jsfiddle.net/vishwas_r/av2gzcLu/

In this tutorial, we’ve learned how to enhance the appearance of CanvasJS charts by underlining and strikethrough text using Unicode characters. This simple yet effective technique can be useful for emphasizing specific chart elements and improving overall visual clarity. Experiment with different combinations of Unicode characters to achieve the desired styling effects in your CanvasJS charts.