Home Forums Feature Requests & Feedback Support for HTML unicode characters

Support for HTML unicode characters

  • #10104

    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 5 years, 7 months ago by lakshman.
    • This topic was modified 5 years, 7 months ago by lakshman.
    #10112

    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.

    chart displaying rupee symbol in the index label

    #27937

    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/

You must be logged in to reply to this topic.