CODEWITHSUNDEEP
javascriptcssd3.js
Timsen
Timsen

Reputation: 4126

how to make text on d3js graph scale together with graph?

I used this example as basic for my graph creation :http://bl.ocks.org/weiglemc/6185069

On my graphs x axis i add some text : 

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Calories");

Everything works fine, but now i also want to create smaller version of this graph, like 200x200 px and when i change height and width x and y axis scale down perfectly, but my text is still as big as before. How do i scale it down when height/width is getting lower or higher?

Upvotes: 0

Views: 34

Answers (1)

MarioD
MarioD

Reputation: 1703

You would have to use media queries to change the font size. Here's a great resource for how media queries work: http://css-tricks.com/css-media-queries/

And here's an example of how you would use it:

@media all and (max-width: 200px) {
  body {
    font-size:10px;
  }
}

Upvotes: 1

Related Questions