Without any size settings the chart will be rendered 650 pixel wide and 400 pixel high. The size of the chart in pixels can be set using the following builder commands:
new ac.ACLineChartBuilder() // ... .setWidth(int); .setHeight(int); // ...
For example, if you want your chart to be 400 pixel wide and 300 pixel high:
new ac.ACLineChartBuilder() // ... .setWidth(400); .setHeight(300); // ...
The chart is printed on a rectangular “canvas” element. Since the chart's visible frame is not always 100% rectangular, a little piece of canvas background remains visible. This becomes an issue when your website's background has a color other than white. The screenshot shows the effect.
In order to eliminate the white frame around the chart, you have to set the canvas background color to the same value as your website's background color.
This is done using the setColorVariable(“SURROUNDING_WEBSITE_COLOR”, String colorString )
function of the builder.
new ac.ACLineChartBuilder() // ... .setColorVariable("SURROUNDING_WEBSITE_COLOR", "#CCFF33") // ...
Colors in HTML are usually indicated in hex notation like this: #CCFF33
.
setColorVariable()
expects the colors as a color string either in hex (e.g. #FFFFFF or #fff), RGB (e.g. 120, 130, 150) or RGBA notation (e.g. 255, 0, 0, 1.0) with decimal or percentage numbers. The alpha value (A of the RGBA notation) describes the transparency level. Just leave this at “1.0” for full visibility. You can even mix absolute and percentage values for the RGB or RGBA notation, e.g. (100, 100%, 20, 1.0).
setColorVariable()
will still be able to understand and calculate the colors correctly.