KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

ChartJS disable responsive height but keep width and ratio? #2299

Open Nick Hartt opened this topic on on Aug 24, 2021 - 1 comments

Nick Hartt commented on Aug 24, 2021

Is it possible to set the width and/or height on charts in the settings object itself? We are using a stylesheet with krwidget > * to set our widths and heights currently, which works, but is a bit of a hack. This property already exists on Google Charts, but not ChartJS.

Also, we would like responsive charts to fit themselves to the content rather than the viewport. We are having an issue where we have a bar chart with many bars, and it is being condensed down to a very small area, making it unreadable. A current workaround is to wrap the chart in a div with a forced height based on the amount of unique bars, but it would be nice if KoolReport could do this automatically. For example, a bar chart with 50 labels displayed on a small screen is resized such that the bars are tiny due to KoolReport fitting the tall chart into the viewport height, where we would prefer it to size to the viewport width and have the viewport scrollable to see the bars further down the chart as this will never be small enough to fit into a viewport.

Note: we cannot use Google Charts as this is for an offline intranet system.

Sebastian Morales commented on Aug 25, 2021

Nick, you would have to define the div's fixed width based on user's screen size using CSS's media screen. Then make Chartjs' width to 100%. Let us know if there's issue with this method. Tks,

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

ChartJS