Support for HTML unicode characters

Question

Hi, I have the following canvas js code for my graph,
        `var line=new CanvasJS.Chart(&#8220;chartContainer_line&#8221;,
		    {
		title:{
	        text: &#8220;Revenue&#8221;,
	        fontFamily: &#8220;calibri black&#8221;
	      },
	      animationEnabled: true,
	      axisY: {
	        title: &#8220;Company Based Revenue&#8221;
	      },
	      legend: {
	        verticalAlign: &#8220;bottom&#8221;,
	        horizontalAlign: &#8220;center&#8221;
	      },
	      theme: &#8220;theme1&#8221;,
	      data: [
	      {
	        type: &#8220;column&#8221;,
	        showInLegend: true,
	        legendMarkerColor: &#8220;grey&#8221;,
	        legendText: &#8220;Currency in Rupees(&#8377;)&#8221;,
	        dataPoints: [
	        {y: 297571, label: &#8220;SD1&#8221;},
	        {y: 267017,  label: &#8220;SD2&#8221; },
	        {y: 175200,  label: &#8220;SD3&#8221;},
	        {y: 154580,  label: &#8220;SD4&#8221;},
	        {y: 116000,  label: &#8220;SD5&#8221;},
	        {y: 97800, label: &#8220;SD6&#8221;},
	        {y: 20682,  label: &#8220;SD7&#8221;},
	        {y: 20350,  label: &#8220;SD10&#8221;}
	        ]
	      }
	      ]
	    });
	line.render();`
As you can notice the legendText attribute i have specified the text &#8377; 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 ago by lakshman.

jhodgeswaterford · Answer

I'm passing into an Angular component the following: 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/

sanjoy · Answer

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.

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Support for HTML unicode characters