Hi.
I'm using a bar chart and in the ChartValueAxisItem I'd like to add a title that has special characters in it. In HTML, examples would be something like this:
m<sup>3</sup>
CO<sub>2</sub>The issue is, that the title has to be a string and if I put the html tags there, it doesn't render them. How could I add something like this to the title parameter so that it renders correctly?
Thanks,
Greetings,
Bernd
1 Answer, 1 is accepted
Hello Bernd,
In order to use the special characters in the ChartValueAxisItem title, use the unicode characters. For example:
<ChartValueAxis>
<ChartValueAxisItem title={{ text: "m\u00B3 CO\u2082" }} />
</ChartValueAxis>Output:
I have demonstrated the above code snippet in this StackBlitz example.
Please let me know if this helps or if I can further assist you.
Regards,
Hetali
Progress Telerik
Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024
Rank 5
Bronze
Bronze
Bronze
Hi Hetali.
Thanks for your quick answer. I probably should have mentioned that I want to put this chart into a PDF using the PDFViewer component and the exportPDF function from the kendo-drawing package. If I use what you explained above I get a box as shown in the attached image. I have added the Roboto.ttf file to the css for the PDF. Could it be, that this font doesn't support the special character? It works for the m2 an m3, btw.
Greetings,
Bernd
Hi Bernd,
Indeed, the font Roboto does not support subscripts as seen in this page. Upon using the font Arial, both the superscript and subscript are exported to the PDF and the PDFViewer as seen in the screenshots below:
Exported PDF:
PDF opened in PDFViewer:
I have created a sample application where I have added font Arial to the PDF export and it works well with the superscript and subscript unicodes. Please find it attached. Run npm install followed by npm start to see the demo.
I hope I was able to assist you with the font issue. Please let me know if you have any further questions.
Regards,Hetali
Progress Telerik
Rank 5
Bronze
Bronze
Bronze
Hi Hetali.
First of all, thank you very much for all your efforts to help me out here. This is much appreciated!
Unfortunately, this doesn't work even in your example if I use the unicode \u2082 for the subscript of 2, as in CO2. It works in the html render of the chart of course but not in the exported pdf where it just displays a box. So it seems that even Arial doesn't recognize it.
I also tried to just use the html entity ₂ which also works in the html rendered chart but not in the exported pdf.
Any idea how to solve this?
Hi Bernd,
I had my colleague run the application in their system, and they verified that the subscript works fine. Can you please confirm that you ran my demo project, and not just applied the concept in your application? This is important because we need to isolate things as to where the problem is. If the problem exists only in your project, but not in my demo, then there's a side effect happening in your project. Are you able to isolate your application and share it? I can then investigate.
If you ran my application, and couldn't see the subscript in the PDF file, I'm wondering if the application that you're using to open the PDF is outdated or does not support Arial font. Could you share more information on the application you're using along with the OS of the machine?
Regards,
Hetali
Progress Telerik
Rank 5
Bronze
Bronze
Bronze
Hi.
I have added the subscript code to the application you shared with me in the zip file. So I downloaded it, ran npm install and then npm start to run it. Then I added the subscript Unicode and the result in the pdf was the box.
I used Chrome running on a Windows 10 machine and acrobat reader to show the pdf. My Acrobat reader runs in German, could that be the problem? I think it's weird that it shows correctly in the rendered html but not in the rendered PDF.
I have attached the project including my changes and the rendered pdf file, a screenshot of the html rendering, a screenshot of the pdf file and a screenshot of my Acrobat version and the embedded font info of the document. Maybe that helps to find out what the problem is.
Weird that it works on your side. Typical case of "runs on my machine". :-D
Thanks!
Greetings,
Bernd
Hi Bernd,
Thank you for sharing additional details. I noticed that the example only had superscripts and no subscripts (incorrect unicode) with font Arial which led to a confusion on my end.
Upon further research, I found that the font liberation works with both subscripts and superscripts. I have updated the example with font liberation and also updated the unicode in the title. Following is the screenshot of the exported PDF:
Please run the updated example (attached) and let me know if it helps.
My apologies for the confusion caused before.
Regards,Hetali
Progress Telerik
Rank 5
Bronze
Bronze
Bronze
Hi Hetali.
YES! That works perfectly. Thanks for your great help!
As always it's really amazing how good your support is in this forum here.
Greetings,
Bernd
Hi Bernd,
I'm glad I was able to assist you with this case.
I also noticed that you have a DevCraft Ultimate license which comes with a 24 hour turnaround. To receive a faster turnaround in the future, please open a private support ticket. This also gives you the benefit of sharing the code privately with the Telerik team only along with unlimited tickets. More information can be found in this page.
Please feel free to reach out if you have more questions.
Regards,Hetali
Progress Telerik