Customize Charts in PHPRunner

PHPRunner and ASPRunner.NET provide visual options for creating and configuring charts. When you need more control over a chart’s appearance or behavior, you can customize the underlying AnyChart object with the ChartModify event.

ChartModify gives you direct access to the chart object before the chart is displayed. This makes it possible to customize titles, labels, colors, scrolling, zoom, axes, value formatting and many other chart properties.

To add custom chart code, open the ChartModify event for your chart and use the chart object provided by the event.

For more information, see the PHPRunner ChartModify documentation or the ASPRunner.NET ChartModify documentation.

You can also refer to the AnyChart API documentation for additional chart customization options.

Here are several useful examples.

Add a horizontal scroller

Use xScroller() to add a horizontal scroller to the chart:

var currentScroller = chart.xScroller();
currentScroller.enabled(true);

Add a horizontal scroller and set the initial zoom

You can combine the scroller with an initial zoom range:

var currentScroller = chart.xScroller();
currentScroller.enabled(true);

chart.xZoom().setToPointsCount(50);

This example initially displays a portion of the available data while allowing the user to scroll through the rest of the chart.

Change label color and font size

To customize labels on the first series:

var series = chart.getSeriesAt(0);

series.labels()
	.fontColor("green")
	.fontSize(16);

You can use the same approach to customize other series by changing the series index.

Customize series appearance

You can access an individual series with getSeriesAt() and change its appearance.

For example, set the first series color:

var series = chart.getSeriesAt(0);
series.color("#FF0000");

You can also use transparency:

var series = chart.getSeriesAt(0);
series.color("#FF0000", 0.25);

Or use a gradient fill:

var series = chart.getSeriesAt(0);
series.color(["#FEFEFE", "#424242"], 0.69, 0.59);

The series index starts at zero, so 0 refers to the first series, 1 to the second, and so on.

Customize the chart title

Change the title color:

chart.title().fontColor("#FF0000");

Set both the title text and color:

chart.title({
	text: "Custom title",
	fontColor: "#F44336"
});

Or disable the title:

chart.title(false);

Format chart values

You can use JavaScript to control how values are displayed.

For example, format values as currency:

var series = chart.getSeriesAt(0);

series.labels().textFormatter(function() {
	var num = Number(this.value);
	return "$" + num.toFixed(2);
});

The same technique can be adapted for percentages, units of measurement or other display formats.

Add another Y-axis

Charts with different value ranges can benefit from multiple Y-axes.

The following example adds another Y-axis on the right side of the chart:

var extraYAxis = chart.yAxis(1);

extraYAxis.orientation("right");
extraYAxis.enabled(true);

var extraScale = anychart.scales.linear();
extraScale.minimum(100);
extraScale.maximum(500);
extraScale.ticks().interval(50);

extraYAxis.scale(extraScale);

A separate scale can then be assigned to the appropriate series.

Change colors in a pie or doughnut chart

You can define a custom palette for a pie or doughnut chart:

chart.palette([
	"#64b5f6",
	"#1976d2",
	"#ef6c00",
	"#ffd54f",
	"#455a64"
]);

Add or remove colors from the array to match the number of categories in your chart.

Add a range marker

Range markers are useful for highlighting a specific area of a chart.

For example:

var marker = chart.rangeMarker();

marker.from(50);
marker.to(100);
marker.fill("#FF0000", 0.15);

This can be useful for displaying target ranges, warning zones or other significant intervals.

Using the AnyChart API

The examples above cover only a small portion of what can be customized.

The chart parameter supplied to the ChartModify event is the AnyChart chart object, so you can use the AnyChart API to customize additional chart properties.

For example, you can control:

• series appearance;
• titles and labels;
• axes and scales;
• legends;
• tooltips;
• markers;
• palettes;
• scrollers and zooming;
• value formatting.

Start with PHPRunner’s visual chart settings for the basic chart configuration, then use ChartModify when you need additional control.

See the PHPRunner Chart Appearance documentation, ChartModify documentation and the AnyChart API reference for more information.