Hoping someone might be able to help me as I’m really struggling with getting CSS and JS working for this rendering issue I have with horizontal bar charts in Knack (I think they use Highcharts to render them).
I am looking to make the horizontal bar charts a fixed width of 1150px but have the height set to “Auto”, as my datasets are constantly evolving, so my current method of fixing the dimensions isn’t scalable.
Knack’s own “Auto” function unfortunately renders the horizontal bar charts in about 50% of the viewable screen, and even a single column layout doesn’t seem to fix this.
Below is a link to a page that shows where I have had to manually set the size constraints, and I’m hoping someone may have a solution that I can apply globally to all of my horizontal bar charts contained within my app:-
Hi @Duncan, resizing Highcharts containers can be fickle as it can squish all your chart data if you restyle the wrong parent container.
The below CSS selector is the safest and limits the max height, adds a scrollbar, and doesn’t condense the bars, however the filter menu will also scroll.
div[id^="kn-report-"] {
max-height: 600px;
}
Note if you try and add a max height on the .kn-report-rendered container, it will condense all of the chart bars, which is not ideal and is why we go one level up.
That indeed should solve part of my problem, but I was hoping to have a solution where I could set the width to a fixed dimension of 1150px, and then have the graph render with an auto height, to achieve the same thing you have done above with ensuring that graphs don’t get compressed when more data is added to it.
Is this something that can be set globally, or is your solution the only way around this?
To give you some context as to why I would like this functionality, is that I track ransomware victims all around the world and that data is constantly in flux, so my graphs are not really static, they are a reflection on the constant changes and additions being made daily.
Thanks again for your response and advice, and hoping you might be able to still help me get to the solution I am a seeking.
I can confirm that if I set the height to something like 5000px with your code above, that I do get the desired effect that I was seeking, as the max-height setting doesn’t force a fixed-height, but is literally a cut-off for when the scroll-bar needs to activate.
However, if I set the graphs to “Auto” rather than “Custom”, I get the same issue where the graph is displayed in only 50% of the viewable area. I’ve tried adding a width, min-width, max-width to your code and it doesn’t seem to work, so I must be doing something wrong I guess.
Additionally, if I reselect “Custom”, then the graphs are still rendering to those fixed width and height constraints which means I’m back to square one.
Thanks again for all your help and hoping you can maybe help me further.
The real issue I have here is that I need the graph to pick up the fixed-width I set in “Custom”, but ignore any fixed-height I set in “Custom” and have it over-ridden with an “Auto Height” function, so if the graph only has limited data, it will be a smaller graph in height, and a graph with more data would resize nicely to accomodate the increase in data. Is that actually something that can be done or I am hoping for something here that realistically can’t be done in code?
I think I’m nearly there now. Indeed your code in Step #2 does appear to fix my issue for desktop viewing, but breaks the custom sizing that I have set for vertical bar charts and pie charts to display on mobile devices.
Is it possible to make this code only work for when a graph is set to “Auto”, and any graph set to “Custom” be left to inherit the custom values, so basically only run the CSS if “Auto” is set to true.
Thanks. It was the Pie Chart I have on the page that was giving me grief mainly on the mobile. Not sure there is a way to exclude that kind of chart from the code perhaps?
I think I have cracked it using a combination of JS and CSS:-
Javascript
$(document).on(‘knack-view-render.any’, function(event, view, data) {
if (view.type === ‘report’) {
var chart = Highcharts.charts.find(c => c && c.renderTo.closest(‘#’ + view.key));
if (chart && chart.options.chart.type === 'bar') {
// Clear out the chart's internal width configuration entirely
chart.options.chart.width = null;
// Force the container to reset
var $container = $('#' + view.key + ' .highcharts-container');
$container.css('width', '100%');
// Perform a hard redraw
chart.redraw();
chart.reflow();
// Add the marker class
$('#' + view.key).addClass('force-100-percent');
}
}
});
CSS
/* 1. Force the highcharts container to ignore fixed widths */
.highcharts-container {
width: 100% !important;
position: relative !important;
}
/* 2. Force the SVG to ignore internal calculations */
.highcharts-container svg {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/* 3. Global override for the wrapper div that Highcharts creates /
div[style=“width: 500px”] {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
Thank you for the steer that put me in the right direction to find the attributes etc.
