How do you change the height of a rich:chart bar chart?

Question

I have a bar chart that is built using rich:chart (richfaces). Everything works fine except that the legend exceeds the height of the bar chart. How do I adjust the overall height of the chart? There is no height attribute or anything that is equivalent to it. Adjusting the height of its div container does not help either.

Answer 1

You need to change the height of div.chart-container . Use @styleClass to add the class with correct height.

Answer 2

Here's an example I used to solve my question:

.chart-container {
    float: left;
    box-sizing: content-box;
    width: 800px;
    height: 450px;
    padding: 2px 2px 2px 2px;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 10px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 10px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 10px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 10px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 10px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    font-size: 16px;
    font-style: bold;
}