How to add special character(&) in chart title of Lightning components?

Question

We had a record type on an opportunity called as 'JSI'.Now it has been changed to 'J&SI'. Based on record type we create a report with the recordtypename+Reportname.

I have already changed the report label name.However some of the reports was created in lightning component.

Below is the existing Lightning component that i have modified:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:tabset >
    <lightning:tab label="Factor All">
        <c:JSIAllFactorTargetReport isReport="true" reportParameter="Factor All" targetReportName="JSI_Quarterly_Target_Report" actualReportName='JSI_Quarterly_Target_Report' apexDataProvider="JSIAllFactorDataProvider" chartTitle="J&SI Factor Report"/>
    </lightning:tab>
    <lightning:tab label="G Factor">
        <c:JSIFactorTargetReport isReport="false" reportParameter="Factor" targetReportName="JSI_Monthly_Target_Report" actualReportName='JSI_Monthly_Target_Report' apexDataProvider="JSIDataProvider" chartTitle="J&SI Factor Report"/>
    </lightning:tab>
</lightning:tabset>

When I try to change the chart title name from chartTitle="JSI Factor Report" to chartTitle="J&SI Factor Report",it gives me an error:

Failed to save undefined: (recortypeid):4,275: ParseError at [row,col]:[5,275] Message: The reference to entity "SI" must end with the ';' delimiter.: Source

I am not sure if I can use special character in Chart Title.

Can someone please suggest is it possible to add special character in chart title?

Answer 1

From https://developer.mozilla.org/en-US/docs/Glossary/Entity

HTML has a set of four reserved characters that must be represented as entities. All other characters can be represented with entities as needed, but it is not mandatory. These are the entities used for those four reserved characters:

• & (&) - Required , so that a browser does not misinterpret it as the beginning of an entity.
• < (<) - Required because otherwise a browser could misinterpret it as the beginning of a tag
• > (>) - Required else, a browser could misinterpret it as the ending of a tag
• &quote; (") - Required only within attributes value surrender by quote sign

See here for a full list of all HTML character entities - https://dev.w3.org/html5/html-author/charref

So replacing & with & will solve this issue.

source : https://stackoverflow.com/a/35368068/907225