{"id":1484,"date":"2016-06-05T15:54:16","date_gmt":"2016-06-05T20:54:16","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=1484"},"modified":"2026-08-16T16:48:32","modified_gmt":"2026-08-16T21:48:32","slug":"new-charting-functionality-anychart-7-support","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2016\/06\/05\/new-charting-functionality-anychart-7-support\/","title":{"rendered":"Customize Charts in PHPRunner"},"content":{"rendered":"<p>PHPRunner and ASPRunner.NET provide visual options for creating and configuring charts. When you need more control over a chart&#8217;s appearance or behavior, you can customize the underlying AnyChart object with the <strong>ChartModify<\/strong> event.<\/p>\n<p>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.<\/p>\n<p><!--more--><\/p>\n<p>To add custom chart code, open the <strong>ChartModify<\/strong> event for your chart and use the <strong>chart<\/strong> object provided by the event.<\/p>\n<p>For more information, see the <a href=\"https:\/\/xlinesoft.com\/phprunner\/docs\/chartmodify.htm\">PHPRunner ChartModify documentation<\/a> or the <a href=\"https:\/\/xlinesoft.com\/asprunnernet\/docs\/chartmodify.htm\">ASPRunner.NET ChartModify documentation<\/a>.<\/p>\n<p>You can also refer to the <a href=\"https:\/\/api.anychart.com\/\">AnyChart API documentation<\/a> for additional chart customization options.<\/p>\n<p>Here are several useful examples.<\/p>\n<h2>Add a horizontal scroller<\/h2>\n<p>Use <strong>xScroller()<\/strong> to add a horizontal scroller to the chart:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar currentScroller = chart.xScroller();\r\ncurrentScroller.enabled(true);<\/textarea><\/pre>\n<\/div>\n<h2>Add a horizontal scroller and set the initial zoom<\/h2>\n<p>You can combine the scroller with an initial zoom range:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar currentScroller = chart.xScroller();\r\ncurrentScroller.enabled(true);\r\n\r\nchart.xZoom().setToPointsCount(50);<\/textarea><\/pre>\n<\/div>\n<p>This example initially displays a portion of the available data while allowing the user to scroll through the rest of the chart.<\/p>\n<h2>Change label color and font size<\/h2>\n<p>To customize labels on the first series:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar series = chart.getSeriesAt(0);\r\n\r\nseries.labels()\r\n\t.fontColor(\"green\")\r\n\t.fontSize(16);<\/textarea><\/pre>\n<\/div>\n<p>You can use the same approach to customize other series by changing the series index.<\/p>\n<h2>Customize series appearance<\/h2>\n<p>You can access an individual series with <strong>getSeriesAt()<\/strong> and change its appearance.<\/p>\n<p>For example, set the first series color:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar series = chart.getSeriesAt(0);\r\nseries.color(\"#FF0000\");<\/textarea><\/pre>\n<\/div>\n<p>You can also use transparency:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar series = chart.getSeriesAt(0);\r\nseries.color(\"#FF0000\", 0.25);<\/textarea><\/pre>\n<\/div>\n<p>Or use a gradient fill:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar series = chart.getSeriesAt(0);\r\nseries.color([\"#FEFEFE\", \"#424242\"], 0.69, 0.59);<\/textarea><\/pre>\n<\/div>\n<p>The series index starts at zero, so <strong>0<\/strong> refers to the first series, <strong>1<\/strong> to the second, and so on.<\/p>\n<h2>Customize the chart title<\/h2>\n<p>Change the title color:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nchart.title().fontColor(\"#FF0000\");<\/textarea><\/pre>\n<\/div>\n<p>Set both the title text and color:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nchart.title({\r\n\ttext: \"Custom title\",\r\n\tfontColor: \"#F44336\"\r\n});<\/textarea><\/pre>\n<\/div>\n<p>Or disable the title:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nchart.title(false);<\/textarea><\/pre>\n<\/div>\n<h2>Format chart values<\/h2>\n<p>You can use JavaScript to control how values are displayed.<\/p>\n<p>For example, format values as currency:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar series = chart.getSeriesAt(0);\r\n\r\nseries.labels().textFormatter(function() {\r\n\tvar num = Number(this.value);\r\n\treturn \"$\" + num.toFixed(2);\r\n});<\/textarea><\/pre>\n<\/div>\n<p>The same technique can be adapted for percentages, units of measurement or other display formats.<\/p>\n<h2>Add another Y-axis<\/h2>\n<p>Charts with different value ranges can benefit from multiple Y-axes.<\/p>\n<p>The following example adds another Y-axis on the right side of the chart:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar extraYAxis = chart.yAxis(1);\r\n\r\nextraYAxis.orientation(\"right\");\r\nextraYAxis.enabled(true);\r\n\r\nvar extraScale = anychart.scales.linear();\r\nextraScale.minimum(100);\r\nextraScale.maximum(500);\r\nextraScale.ticks().interval(50);\r\n\r\nextraYAxis.scale(extraScale);<\/textarea><\/pre>\n<\/div>\n<p>A separate scale can then be assigned to the appropriate series.<\/p>\n<h2>Change colors in a pie or doughnut chart<\/h2>\n<p>You can define a custom palette for a pie or doughnut chart:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nchart.palette([\r\n\t\"#64b5f6\",\r\n\t\"#1976d2\",\r\n\t\"#ef6c00\",\r\n\t\"#ffd54f\",\r\n\t\"#455a64\"\r\n]);<\/textarea><\/pre>\n<\/div>\n<p>Add or remove colors from the array to match the number of categories in your chart.<\/p>\n<h2>Add a range marker<\/h2>\n<p>Range markers are useful for highlighting a specific area of a chart.<\/p>\n<p>For example:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nvar marker = chart.rangeMarker();\r\n\r\nmarker.from(50);\r\nmarker.to(100);\r\nmarker.fill(\"#FF0000\", 0.15);<\/textarea><\/pre>\n<\/div>\n<p>This can be useful for displaying target ranges, warning zones or other significant intervals.<\/p>\n<h2>Using the AnyChart API<\/h2>\n<p>The examples above cover only a small portion of what can be customized.<\/p>\n<p>The <strong>chart<\/strong> parameter supplied to the ChartModify event is the AnyChart chart object, so you can use the AnyChart API to customize additional chart properties.<\/p>\n<p>For example, you can control:<\/p>\n<ul>\n<li>series appearance;<\/li>\n<li>titles and labels;<\/li>\n<li>axes and scales;<\/li>\n<li>legends;<\/li>\n<li>tooltips;<\/li>\n<li>markers;<\/li>\n<li>palettes;<\/li>\n<li>scrollers and zooming;<\/li>\n<li>value formatting.<\/li>\n<\/ul>\n<p>Start with PHPRunner&#8217;s visual chart settings for the basic chart configuration, then use <strong>ChartModify<\/strong> when you need additional control.<\/p>\n<p>See the <a href=\"https:\/\/xlinesoft.com\/phprunner\/docs\/chart_appearance.htm\">PHPRunner Chart Appearance documentation<\/a>, <a href=\"https:\/\/xlinesoft.com\/phprunner\/docs\/chartmodify.htm\">ChartModify documentation<\/a> and the <a href=\"https:\/\/api.anychart.com\/\">AnyChart API reference<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PHPRunner and ASPRunner.NET provide visual options for creating and configuring charts. When you need more control over a chart&#8217;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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,4,3],"tags":[],"class_list":["post-1484","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-php-code-generator","category-php-form-generator"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1484"}],"version-history":[{"count":15,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1484\/revisions"}],"predecessor-version":[{"id":3451,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1484\/revisions\/3451"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}