How to change the axis title with rCharts, dPlot and dimple

Question

How can I change the axis titles of a plot generated with rCharts and the dimple.js library? For example:

library(rCharts)
data(mtcars)
mtcars.df <- data.frame( car = rownames(mtcars), mtcars )
d1 <- dPlot(x ="disp", y="mpg", groups=c("car", "cyl"), type ="point", data=mtcars.df)
d1$xAxis( type = "addMeasureAxis")
d1

The desired effect is to replace the variable name "disp" with a more complete piece of text as the axis title. I've tried adding arguments to the d1$xAxis() line like title="Displacement" and label="Displacement: but without success.

timelyportfolio · Accepted Answer · 2014-07-22T03:18:16.107

Sorry I just saw this. Thanks John for answering.

With rCharts, we can take advantage of the afterScript template to add this. If there is only one chart in the DOM, we can use John's example unmodified.

d1$setTemplate(
  afterScript = 
  '
    d3.selectAll(".axis.title")
    .text(function () {
      var t = d3.select(this).text();
      if (t === "disp") {
          return "Displacement";
      } else if (t === "mpg") {
          return "Miles Per Gallon";
      } else {
          return t;
      }
    }); 
  '
)

Please let me know if this you would like an example with multiple charts in the DOM or this does not work for you. Thanks.

score 2 · Answer 2 · answered Apr 06 '14 at 21:16

Dimple doesn't currently expose the titles, however it's coming in the next release. Once it does I'm sure the great guys behind the dimple implementation in rcharts will add them into the library. I'm not quite sure how this works with an R implementation but if you can run some Javascript once the chart is rendered you can modify the titles using some raw d3:

d3.selectAll(".axis.title")
    .text(function () {
        var t = d3.select(this).text();
        return (t === "disp" ? "Displacement" : t);
    });

If you want to extend this to replace a couple of titles you can do it with:

d3.selectAll(".axis.title")
    .text(function () {
        var t = d3.select(this).text();
        if (t === "disp") {
            return "Displacement";
        } else if (t === "mpg") {
            return "Miles Per Gallon";
        } else {
            return t;
        }
    });

I hope this helps.

score 2 · Answer 3 · edited May 23 '17 at 12:06

Here is another way:

# devtools::install_github("rCharts", "ramnathv", ref = "dev")
library(rCharts)
data(mtcars)
mtcars.df <- data.frame( car = rownames(mtcars), mtcars )
d1 <- dPlot(x ="disp", y="mpg", groups=c("car", "cyl"), type ="point", data=mtcars.df)
d1$xAxis( type = "addMeasureAxis")
d1

d1$setTemplate(afterScript = "
  <script>
    myChart.draw()
    myChart.axes[0].titleShape.text('Displacement')
    myChart.axes[1].titleShape.text('Miles Per Gallon')
    myChart.svg.append('text')
        .attr('x', 40)
        .attr('y', 20)
        .text('Plot of Miles Per Gallon / Displacement')
        .style('text-anchor','beginning')
        .style('font-size', '100%')
        .style('font-family','sans-serif')
  </script>               
")
d1

Screenshot:

enter image description here

Hat tip to Ramnath: R: interactive plots (tooltips): rCharts dimple plot: formatting axis

How to change the axis title with rCharts, dPlot and dimple

3 Answers3

Linked