Solved

How can I make wider charts in an HTMLReport

J
Badge +1

Hi, I'm trying to make an html report using the awesome HTMLReportGenerator transformer, I've been able to do some customizations for better results, but when it comes to the charts that the report creates, I'm still not sure how to increase the width it occupies, to get a graphic distributed over the entire page space. I've been reading the documentation for chart.js a bit, which is the js library that this transformer uses to generate the charts, but still haven't found the answer, does anyone know how I can get a larger chart? I have attached an image of the current report that I can generate and as you should see it would look much better if the chart took up all the space, I already moved the legend to the bottom so I have room on that side. Thanks! ReporteDiarioSismos

icon

Best answer by redgeographics 22 July 2021, 10:39

View original

2 replies

redgeographics
Rank
Userlevel 5
Badge +25

Chart.js uses the HTML5 canvas, so what you can do is take the HTML output from the HTMLReportGenerator and look for the <canvas> tag for the chart you want to adjust. It should have height and width properties so you can use a StringReplacer to alter those.

 

More work, but also a lot more control over the output, would be to use the custom HTML option within the HTMLReportGenerator rather than the Chart one and code the whole chart.js block yourself. This gives you access to all the chart types and options.

J
Badge +1

Chart.js uses the HTML5 canvas, so what you can do is take the HTML output from the HTMLReportGenerator and look for the <canvas> tag for the chart you want to adjust. It should have height and width properties so you can use a StringReplacer to alter those.

 

More work, but also a lot more control over the output, would be to use the custom HTML option within the HTMLReportGenerator rather than the Chart one and code the whole chart.js block yourself. This gives you access to all the chart types and options.

Thanks @Hans van der Maarel​ I have made it, for now just adjusting the div element in which the canva is contained, but I will keep the idea of the custom code block in mind for generate better charts.

Reply


Community Stats

28,669
Posts
109,361
Replies
36,531
Members
Terms & ConditionsCookie settings
A product of
Safe Software respectfully acknowledges that we live, learn and work on the traditional and unceded territories of the Kwantlen, Katzie, and Semiahmoo First Nations.