CODEWITHSUNDEEP
javascriptsvgd3.jscalendarheatmap
user1825446
user1825446

Reputation: 21

cal-heatmap - How to change text color based on rect .q1{} color?

Given this single day from a 1-month (30-day) calendar of day/price values using cal-heatmap:

<g>
<rect class="q1 graph-rect hover_cursor" width="34" height="34" x="144" y="36">
<title>12345</title>
<text class="subdomain-text" x="161" y="53" text-anchor="middle" dominant-baseline="central"> 8</text>
</g>

I know the object is styled using a class name (.q1).

But, how can we style the element separately from the generic .subdomain-text{} CSS rule that hits ALL elements?

If the .q1 class was attached to the parent element <g>, we could use a descendant CSS selector to handle this, so essentially

1) I want to be able to do this: 

`g.q1 text {fill:red}`

...which will let me have custom text colors based on the fact this overall date is in the .ql css color range.

2) I also want to uniquely style the text for days before "today"...

3) ...and separately style the default style used for NULL prices which I believe comes from .subdomain-text {} CSS rule. (not all 30 days will necessarily have a price value - it could be null).

Is there a way to style the element beyond the default .subdomain-text{} rule?

Upvotes: 1

Views: 1780

Answers (3)

Dexter
Dexter

Reputation: 9314

Aug 2020

I know the question is old, but if any of you still looking to color the 'text' and its 'background' cell color, then here's the answer.

Text color

Use fill on a .subdomain-text class. You cannot use color: white property.

.subdomain-text {
    fill: white;
}

Background cell color

Use the same fill on a .graph-rect class

.graph-rect {
    fill: dodgerblue;
}

If you have multiple svg elements in your file then use the svg.cal-heatmap-container to add your css to be more precise.

svg.cal-heatmap-container .subdomain-text {
    fill: white;
}

Upvotes: 0

nivhanin
nivhanin

Reputation: 1908

Another option is to edit CSS rules like that:

.cal-heatmap-container .subdomain-text {
    font-size: 16px;
    fill: red;
}

Upvotes: 1

Luis Amor
Luis Amor

Reputation: 167

You can write new CSS rules for the text element, for example:

.cal-heatmap-container{
  .q1  + title + .subdomain-text {
    fill: red;
  }
  .q2,
  .q3,
  .q4,
  .q5{
    + title + .subdomain-text {
      fill: #ffffff;
    }
  }
}

More info: https://github.com/kamisama/cal-heatmap/issues/143

Upvotes: 1

Related Questions