From one of our customers. All code goes to ChartModify event and applies to PHPRunner 10.x, ASPRunner.NET 10.x and ASPRunnerPro 10.x.
- adjusting colors and styles
- adding a tooltip with the icon
- using right-click menu to export/save chart
// Enable series for modification
var series = chart.getSeriesAt(0);
series.labels(true);
series.labels().fontSize(15);
series.labels().fontColor("#ffffff");
series.labels().format("£{%value}");
// set chart stroke color, thickness dash
series.stroke({color: "#BBDA00", dash: "4 3", thickness: 3});
series.hovered().stroke({color: "#BBDA00", dash: "4 3", thickness: 3});
series.name("Funding");
// adjust markers of a series
var markers = series.markers();
markers.enabled(true);
markers.fill("#BBDA00");
markers.stroke("2 white");
// adjust hover marker
var hoverMarkers = series.hovered().markers();
hoverMarkers.fill("darkred");
hoverMarkers.stroke("5 white");
// Set the legend text color
chart.legend().fontColor("#ffffff");
chart.contextMenu(true);
// Set the Y scale for the chart
var yScale = chart.yScale();
yScale.minimum(400);
yScale.maximum(2500);
// Set 5 per divison
var ticks = chart.yScale().ticks();
ticks.interval(300);
// set y axis title
var yTitle = chart.yAxis(0).title();
yTitle.text("Range £400 to £3000");
yTitle.fontColor("#ffffff");
// adjust y axis
var yAxis = chart.yAxis();
yAxis.ticks(null);
yAxis.minorTicks(null);
yAxis.stroke("white");
var yLabels = chart.yAxis().labels();
yLabels.fontColor("white");
yLabels.fontWeight(900);
yLabels.format("£{%value}");
// set additional y axis hide dashed right stroke of a grid
var yAxis1 = chart.yAxis(1);
yAxis1.ticks(null);
yAxis1.stroke("white 0.1");
yAxis1.labels(null);
yAxis1.orientation("right");
// adjust x axis
var xAxis = chart.xAxis();
xAxis.stroke("white 0.1");
var xLabels = xAxis.labels();
xLabels.fontColor("white");
xLabels.fontWeight(900);
xLabels.height(20);
xLabels.vAlign("middle");
xLabels.format("{%value}");
// set y axis title
var xTitle = chart.xAxis(0).title();
xTitle.text("Service Users");
xTitle.fontColor("#ffffff");
// Chart Title
chart.title().useHtml(true);
chart.title("<span style='color:white'>Funnding Trends
<span style='font-style:italic'>By Service User</span>");
// configure tooltips
chart.tooltip().useHtml(true);
chart.tooltip().titleFormat("<img width='20' src='images/anychart-logo-medium.png'> <span style='font-size:20px;font-family:courier'>{%x}");
chart.tooltip().format("<span style='font-family:courier;font-size:20px'>£{%value}</span>");
// Background color of the chart
var background = chart.background();
background.fill({
// set colors position
keys: ["#406181", "#6DA5DB"],
// set angle of colors drawing
angle: 90
});
// Boader around chart
background.stroke("5 DarkCyan");
background.cornerType("round");
background.corners(15);
// Range marker, anything higher that 85% is good
var vMarker = chart.rangeMarker(0);
vMarker.from("0");
vMarker.to("1000");
vMarker.axis(chart.yAxis());
vMarker.fill("#e99090 0.25");
// adjust grid
chart.xGrid().enabled(true);
chart.xGrid().stroke({color: "white", dash: "3 5"});
chart.xGrid().palette([null, "black 0.1"]);
chart.yGrid().enabled(true);
chart.yGrid().stroke("white");
chart.yGrid().stroke("white 0.1");
