I'm trying to find a simple way to color a GuideLineLayer
from Plottable.js.
I tried the following so far.
1) trying to use attr()
inside onAnchor()
This adds the attr to the g
element containing the line
element, but doesn't seem to have any effect. Could it be CSS precedence?
var guidelineMax = new Plottable.Components.GuideLineLayer('horizontal')
.value(222)
.onAnchor(function(c) {
c.content().attr('stroke', '#F00')
})
.scale(yScale)
2) using addClass()
This is completely unintuitive, as it colors the boundary of the chart, instead of the guideline.
.red {
stroke: #F00;
}
var guidelineMax = new Plottable.Components.GuideLineLayer('horizontal')
.value(state[state.param].max)
.addClass('red')
.scale(yScale)
I was close with my second solution. addClass()
adds the given class to the component-group
, which meant I had to modify my CSS to target only the guideline.
.plottable .guide-line-layer.red .content line.guide-line {
stroke: #FF0000;
}