set height of chart based on number of categories

edited July 18, 2018 in Questions
I've seen examples of before render snippets used to control attributes of a chart, but it does not look like chart height is one of the available attributes.

We have a bar chart used to display activities of various types for each rep.  I'd like the height of the chart to be dynamic, so that it doesn't hide the names of the sales reps (chart category) when too many are displayed for the static chart height.

Comments

  • Peter HalePeter Hale ✭✭
    edited July 18, 2018
    There isn't a way to do it declaritvely, but you can do it via JS, maybe in a snippet.  In the advanced tab of the chart, you can set the unique id of the element, and then in JS, do something like:

    $(#"my-chart-id").height(myCalculatedHeight);

    You can get the calculated height by using the length of the sales reps model
  • edited November 18, 2016
    I have this in place now, but it isn't having a permanent impact on the way the categories are rendered.  And it doesn't have any impact the first time the chart is rendered.

    I'm using this code in the chart's before render snippet:
    var params = arguments[0], $ = skuid.$;
    var repCount;
    repCount = params.xAxis[0].categories.length;
    dynHeight = repCount*18;
    $('#taskChart').height(dynHeight);
    When the filters are refreshed, it animates the draw at the correct size, then pops to the default chart height of 400.


    I added a couple more css overrides, but the result is the same.  The first two are reflected in the code, the last one gets ignored, even after adding !important
    var params = arguments[0], $ = skuid.$;
    var repCount;
    repCount = params.xAxis[0].categories.length;
    dynHeight = repCount*18;
    $('#taskChart').height(dynHeight);
    $('.sk-chart-wrapper').css('height',dynHeight);
    $('.highcharts-container').css('height',dynHeight);
    Resulting page:
    image


    Would sure be nice to have the chart adjust based on the content.  Or have the option to increase the size of the chart so that category labels are never hidden.
  • edited November 18, 2016
    Ok - this works now, allowing for a minimum height of 400:
    var params = arguments[0], $ = skuid.$;
    var repCount;
    repCount = params.xAxis[0].categories.length;
    dynHeight = Math.max(repCount*20,400);
    $('#taskChart').height(dynHeight);
    $('.sk-chart-wrapper').css('height',dynHeight);
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!