How can you access and style an individual line in G. Raphael line chart

Question

Due to the very poorly documented raphael JS library, I beseech the collective wisdom.

I have a working g. raphael multi-line line chart (similar to http://g.raphaeljs.com/linechart.html)

something like: var lineChart = r.g.linechart(10,10,300,220,[1,2,3,4,5],[[10,20,15,35,30],[5,10,5,15,20]], {shade:true, "colors":["#44F","#CCC"], nostroke:true});

I'd like to change one of the lines to set the fill = clear and stroke = a color

I was told something like this would work, but no luck -any suggestions? lineChart.lines[0].attr({stroke: "#000"}),

for extra credit, how can I set the fills of a line to a gradient?

thanks!

Answer 1

I used Firebug and console.log() to list the attributes on a line:

console.log(chart.lines[0].attr());

I clicked on the log line to see the details, like this:

fill: "none"
path: [ ... ]
stroke: "#ff0000"
stroke-dasharray: ""
stroke-linecap: "round"
stroke-linejoin: "round"
stroke-width: 2
transform: []

For me, I wanted to change the stroke-width. This code works:

chart.lines[0].attr({'stroke-width': 8});

The line-width attribute is listed in the excellent RaphaelJS documentation.

For your problem, I expect you need code like this:

chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});

I hope this helps!

Answer 2

Here are some things I found by trial and error. Will update as I discover more. As you say, it'd be so much better if gRaphael actually had documentation like a real project... although it seems it's recently been handed over so hopefully things will change.

• To access the lines of a line chart: lineChart.lines
  • Accesses a set of path objects, one for each line
• To access the symbols marking data points (or empty array if none): lineChart.symbols
  • Accesses a set of sets, each set housing the symbols for one line
• To access the axis lines: lineChart.axis
  • Accesses a set of paths, one for each axis line. Looks like each axis is one path with the ticks as diversions on the path. To access an individual axis, they are in the same order as how you set which axis are visible (top, right, bottom, left), but there will only be as many as are set. So if you have a bottom X and a left Y ({axis: "0 0 1 1"}), then axis[0] will be the X axis and axis[1] the Y. If you have a left, bottom, and right, the right will be axis[0],bottom axis[1], left axis[2], etc.
• To access the axis text labels: lineChart.axis[n].text (where n is the number, as above, of the axis you want)
  • Accesses a set of Raphael text objects. To do the same change to the axis lines and text, it seems you need to access both sets seperately.