Changing Style of a Color Scale

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig).

Given a page with a dark background:

body {
  background-color: #444;

It is often necessary to lighten the default fontColor and stroke:

var data = [
  {value: 20},
  {value: 640}

var bottom = new d3plus.ColorScale()
  .color(["#000", "#F00"])
    barConfig: {
      stroke: "white"
    shapeConfig: {
      labelConfig: {
        fontColor: "white"
      stroke: "#979797"
    stroke: "white"