JFreeChart border width stroke formatting Example

We introduced the options to specify chart border color in JFreechart in the previous tutorial. You can specify a custom border for your chart. At the end of the tutorial, we mentioned that you can specify a gradient color as the border . It is also possible to create a chart with a specific texture.  In this post, we will focus on strokes. We will describe how to change the border width of your chart and specify patterns. We will also introduce you to various options that will help you to play around with the border format (solid line, dashed line etc). We will start with the basics and get you introduced to some advanced examples as we move on.

Note: You need to take the base program for this example from our JDBC Bar Chart example tutorial.

Increasing the width of Chart border


You use the setBorderStroke method to increase the border width of your chart. This method accepts an object of the class java.awt.Stroke. The pseudo code below increases the border width of your chart by a line width of 15. The line join / cap styles are unaffected in this example.

                BarChartObject.setBorderPaint(Color.BLUE); //sets border color to BLUE
                BarChartObject.setBorderStroke(new BasicStroke(15)); //set line width to 15

The output chart created with this line width is provided below:

JFreeChart - Increase Chart Border Width
JFreeChart - Increase Chart Border Width


Create a border with dash - JFreeChart


You can make the join and cap round, by passing suitable values in the stroke.  Refer below for an example

                BarChartObject.setBorderPaint(Color.RED); //sets border color to RED
                float[] f1 = new float[] { 20.0f, 10.0f, 3.0f, 10.0f };
                BarChartObject.setBorderStroke(new BasicStroke(4.0f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_ROUND,10.0f,f1,0.0f)); //set line width to 15

This produces a chart as shown below:

JFreeChart - Dashed Chart Border Example
JFreeChart - Dashed Chart Border Example


Creating a dashed line border for the chart is bit tricky and needs some explanation. The values you pass to this method 20, 10, 3, 10 mean the following:

a) First draw a line with 20 units.
b) Leave a gap of 10 units.
c) Draw a line of 3 units.
d) Leave a gap of 10 units.

And this pattern should repeat across the chart.

Simple dashed border Example – JfreeChart


If you need a simple pattern of dashes as border around the chart, you can use the code snippet below

                BarChartObject.setBorderPaint(Color.RED); //sets border color to RED
                float[] f1 = new float[] { 10.0f, 10.0f};
                BarChartObject.setBorderStroke(new BasicStroke(4.0f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_ROUND,10.0f,f1,0.0f)); //set line width to 15

This produces an output chart with simple dashes (Note you can play with dash pattern as many times as you want to create more complex patters)

JFreeChart - Simple Dashed border Example
JFreeChart - Simple Dashed border Example
I could not spot any real different between CAP_BUTT, CAP_SQUARE and CAP_ROUND options. Similarly, for JOIN_BEVEL, JOIN_MITER and JOIN_ROUND, at least when it comes to chart. If you are really keen to use these options properly for your chart, I would recommend giving a read at the link 

Gradient color as Chart border – Example


In the setBorderPaint method, you can specify a gradient color instead of a standard color, if you are looking for a gradient border on your chart. What more, you can also split your gradient color border to dazzling dashes by using the approach described earlier. We will quickly examine how to use a gradient color as your chart border.

In order to do this, you have to use java.awt.GradientPaint and pass the resulting color to setBorderPaint method. This is explained with an example below: (I’m poor with gradient color selections, but this should be ok for an example :) )

                BarChartObject.setBorderPaint(new GradientPaint(0, 0, Color.red, 100, 100, Color.blue, true)); //Define a gradient background                   
                BarChartObject.setBorderStroke(new BasicStroke(10.0f));

The gradient bordered chart is provided below

JFreeChart- Gradient border for chart - example
JFreeChart- Gradient border for chart - example

Dashed Gradient – Example


And to complete, you can have dashes with gradient applied to them as borders. The code that does that is provided below, and a sample output is included
                BarChartObject.setBorderPaint(new GradientPaint(0, 0, Color.red, 100, 100, Color.blue, true)); //Define a gradient background
                BasicStroke gradient_border_dash = new BasicStroke(10.0f,                      // Width
                           BasicStroke.CAP_SQUARE,    // End cap
                           BasicStroke.JOIN_MITER,    // Join style
                           10.0f,                     // Miter limit
                           new float[] {20.0f,20.0f}, // Dash pattern
                           0.0f);                     // Dash phase             
                BarChartObject.setBorderStroke(gradient_border_dash);

JFreeChart - Dashed Gradient Border
JFreeChart - Dashed Gradient Border

On the same lines, you can also use java.awt.TexturePaint to use a texture as the border for your chart. (and a dashed texture of course)

That completes our crash course on chart borders – customization options in Java JfreeChart. If you have a question on our tutorial, you can post them in the comments section. We will have a look and help you to resolve it. If you have a requirement that you want us to explain how to do it, you can post that too in the comments section.

No comments:

Post a Comment