Customizing Chart Markers

Many supported chart types display point markers to convey values. The line, scatter, curve, radar and step chart types all use point markers to display the value of a particular point in a series. There are several properties that allow you to manipulate these point markers and create customized charts. The marker properties will have no effect on charts that do not utilize the point markers such as bar and pie charts.

Chart FX for Java also supports per-point and per-series attribute assignment. By utilizing supported members of the PointAttributes and SeriesAttributes classes, you can control the marker shape and size for selected point markers within your charts.

Point Shapes and Sizes

Controlling the MarkerShape

The Chart, PointAttributes and SeriesAttributes classes all support the MarkerShape property. This property allows you to modify the shape of point markers for supported chart types. Chart FX for Java supports many different marker shapes including rectangle, circle, triangle, diamond, marble, horizontal line, vertical line, cross, inverted triangle, X, many, none and a configured picture. To set the marker shape to a circle for all series in the chart:


chart1.setMarkerShape(MarkerShape.CIRCLE);

The PointArributes and SeriesAttributes classes both support the MarkerSize member and MarkerShape member that allow you to configure individual marker settings per point and per series. For example, if you have a two series chart you may choose to show triangles in the first series and no point markers in the second series, as follows:


chart1.getSeries(0).setMarkerShape(MarkerShape.TRIANGLE);
chart1.getSeries(1).setMarkerShape(MarkerShape.NONE);

Setting the MarkerSize

Charts that display point markers such as line, scatter, curve, etc. also support modification of the MarkerSize. Using the MarkerSize property, you may configure the maker size for the entire chart:


chart1.setMarkerSize((short) 10);

The marker size may also be set on a per point or per series basis:


chart1.getPoint(0,0).setMarkerSize((short) 6);
chart1.getSeries(1).setMarkerSize((short) 8);

Conical and Cylindrical Shapes

Chart FX supports a property, called CylSides property, that can transform bars, cubes or Hi-Lo-Close markers to conical and cylindrical shapes. The Chart, PointAttributes and SeriesAttributes classes all support this property, therefore, you may assign a conical and cylindrical shapes for the entire chart, per point and per series.

This property setting should be a positive (cylindrical) or negative (conical) value of the number of sides you want the shape to be. For example, if you have a two series bar chart, and you want the first series to be an octagon cylindrical shape and the second series to be and hexagon base conical shape, your code should look like:


chart1.getSeries(0).setCylSides((short) 8);
chart1.getSeries(1).setCylSides((short) -6);

Controlling Bar Width

When you create a bar chart, the bar will occupy only a percentage of the space allotted (this is the space between tick marks). The Volume property may be used to control the volume of the bars present in the chart and may be set to a value between 0 and 100. Setting the attribute to 100 will cause the markers to be drawn side-to-side filling the entire area between tick marks as seen below:


chart1.setVolume((short)100);

The Volume property is most commonly used to control the bars in supported bar charts; however, the Volume property does have effect on other chart types as well including pie, 3-D area and bubble charts.

Setting Line Style and Width

When you use charts that have a line associated with markers (such as line, curve, step, etc.) you can control the style and width for each line independently using the LineStyle property and LineWidth property, respectively. Both the Chart and SeriesAttribute classes expose these members, so they may be set globally (all series) or for individual series in the chart. For example, to set the style for the lines in a 2D line chart, you can use the following code:


chart1.setLineStyle(LineStyle.DOT);

On the other hand, if you have a 2 series chart and you want the first series to display a dotted line while the second series shows a dashed line, you can use the same properties exposed by the series object as follows:


chart1.getSeries(0).setLineStyle(LineStyle.DOT);
chart1.getSeries(1).setLineStyle(LineStyle.DASH);

You can also set the line width globally or per series. The property will accept an integer and will set the line width to the configured pixel thickness. Here is an example of a global and per series configuration:


chart1.setLineWidth((short) 5);
chart1.getSeries(1).setLineWidth((short) 7);

Separating a Pie Slice Programmatically

If you are plotting a Pie chart and you want to separate a slice programmatically, you may do so by utilizing the SeparateSlice property. The SeparateSlice property is supported by both the PointAttributes and SeriesAttributes classes, and therefore may be applied to a single slice of a pie chart or all points within the series.

Note: Each series represents an individual pie chart when the Pie gallery type is configured. Therefore, setting the SeparateSlice property per series will affect all pie slices and per point will separate only one pie slice.

This property receives the separation distance measured from the center of the pie and expressed in radius percentage. For example setting this property to 100 will make the vertex of the slice to be on the edge of the pie. The following is an example of setting this property per series and per point to selected pie charts:


chart1.getSeries(0).setSeparateSlice((short) 25);
chart1.getPoint(1, 3).setSeparateSlice((short) 25);