javascriptsvgplottable

How to color GuideLine in Plottable.js?


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. screenshot 2016-03-31 18 07 43

.red {
  stroke: #F00;
}

 var guidelineMax = new Plottable.Components.GuideLineLayer('horizontal')
    .value(state[state.param].max)
    .addClass('red')
    .scale(yScale)

Solution

  • 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;
    }