Support for HTML unicode characters

[lakshman]

Hi, I have the following canvas js code for my graph,

`var line=new CanvasJS.Chart(“chartContainer_line”,
{

title:{
text: “Revenue”,
fontFamily: “calibri black”
},
animationEnabled: true,
axisY: {
title: “Company Based Revenue”
},
legend: {
verticalAlign: “bottom”,
horizontalAlign: “center”
},
theme: “theme1”,
data: [

{
type: “column”,
showInLegend: true,
legendMarkerColor: “grey”,
legendText: “Currency in Rupees(₹)”,
dataPoints: [
{y: 297571, label: “SD1”},
{y: 267017, label: “SD2” },
{y: 175200, label: “SD3”},
{y: 154580, label: “SD4”},
{y: 116000, label: “SD5”},
{y: 97800, label: “SD6”},
{y: 20682, label: “SD7”},
{y: 20350, label: “SD10”}
]
}
]
});
line.render();`

As you can notice the legendText attribute i have specified the text ₹ and it recognized the rupee symbol, I want to add the html unicode characters to show the Rupee symbol inside the Chart. Thanks for help.

• This topic was modified 8 years, 8 months ago by lakshman.
• This topic was modified 8 years, 8 months ago by lakshman.

[Sanjoy]

Hi Lakshman,

In order to represent “₹”, you can use the “\u20B9” Unicode. You can set the indexLabel property to the Unicode mentioned above to show the Rupee symbol inside the chart.

Kindly take a look at the code snippet below,

  data: [
    {
      type: "column",
      showInLegend: true,
      legendMarkerColor: "grey",
      legendText: "Currency in Rupees(\u20B9)",
      indexLabel: "\u20B9{y}",
      dataPoints: [
        {y: 297571, label: "SD1"},
        {y: 267017, label: "SD2" },
        {y: 175200, label: "SD3"},
        {y: 154580, label: "SD4"},
        {y: 116000, label: "SD5"},
        {y: 97800, label: "SD6"},
        {y: 20682, label: "SD7"},
        {y: 20350, label: "SD10"}
      ]
    }] 

Also, please take a look at this JSFiddle for an example on setting Rupee Symbol as the indexLabel using Unicode.

[jhodgeswaterford]

I’m passing into an Angular component the following:

<componentName yAxisLabel=”\u00B5W / cm\u00B2″></componentName>

Then, within the component I am using the @Input value like this:
@Input() yAxisLabel: string;
…

…CanvasJS Chart config…

axisY: {
title: this.yAxisLabel
}

…

However, the chart translates it literally as “\u00B5W / cm\u00B2” which is what displays as the axis title. It works just fine if I hard-code the title, but not as an input value.

Solution:
Where I was passing: “\u00B5W / cm\u00B2”
I now pass the HTML Entity: “µW / cm²”

…CanvasJS Chart config…

axisY: {
title: this.yAxisLabel
}

…

Works like a charm.

A great reference for HTML entities, etc: https://www.toptal.com/designers/htmlarrows/

• This reply was modified 4 years, 11 months ago by jhodgeswaterford.
• This reply was modified 4 years, 11 months ago by jhodgeswaterford. Reason: enhance clarity