Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

osTicket v1.10 (stable) and Maintenance Release v1.9.15 are now available! Go get it now

Raphaël SVG Line Chart - Color Change?

I'm sure I'm missing something, but I can't seem to find where the Raphaël SVG Line Chart's colors are defined.

I can see code similar to the following, but I'm unable to find where the property values are written.  I'm assuming it's in JS, somewhere.

<path style="stroke-linejoin: round; stroke-linecap: round;" fill="none" stroke="#a2bf2f" d="M40,280.33334L446.66666999999995,20" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="-1.6">
<circle cx="40" cy="280.33334" r="4.800000000000001" fill="#a2bf2f" stroke="none" style="">
<circle cx="446.66666999999995" cy="20" r="4.800000000000001" fill="#a2bf2f" stroke="none" style="">

-------  My Info  -------

osTicket Version: v1.9.7 (4be5782)
Web Server Software: Apache/2.4.7 (Ubuntu)
MySQL Version: 5.5.43
PHP Version: 5.5.9-1ubuntu4.9


  • I don't know it, but I'd recommend to start looking at all files with Raphael relations:✓&amp;q=Raphael
  • edited May 2015
    I'm still unable to locate where the colors are defined, and I'd like some help, if anyone has a moment.

    I've tried tracking it down with Firebug (see attachment) and even searching/grepping for the hex and rgb values in the code, but I think they may not be explicitly defined.

    In "g.raphael.js", there is a colors function (see below), but it appears to generate on hue, saturation, and brightness (hsb).  If possible, I'd like to set the values by hex.

         * g.colors
         [ array ]
         * An array of color values that charts will iterate through when drawing chart data values.
        colors: (function () {
                var hues = [.6, .2, .05, .1333, .75, 0],
                    colors = [];
                for (var i = 0; i < 10; i++) {
                    if (i < hues.length) {
                        colors.push('hsb(' + hues[i] + ',.75, .75)');
                    } else {
                        colors.push('hsb(' + hues[i - hues.length] + ', 1, .5)');
                return colors;
  • edited January 2017
    This is an older thread, but I thought I'd post an answer in case others (like me) find themselves looking for a way to customize the line and legend colors on Dashboard graphs in osTicket. The last comment by belwi above shows the array and function involved in determining which colors to use for the Dashboard graph lines.

    In order to select different colors, you just need to edit the decimal values in the "hues" array. Each of these six values corresponds to one of the ticket statuses on the Dashboard (created, closed, reopened, assigned, transferred, and overdue). The defaults are shown in belwi's code. These six values are converted into the more common hex color codes elsewhere, but the "HSB" ("hue, saturation, brightness") representation is set here. See this W3Schools page and tool for more information on HSB/HSL color notation: .

    Note: I'm using the newest stable version (v1.10).

  • Thank you for sharing your solution.

Sign In or Register to comment.