Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setting margin around figure in R #567

Closed
zeigerpuppy opened this issue Aug 31, 2017 · 3 comments
Closed

setting margin around figure in R #567

zeigerpuppy opened this issue Aug 31, 2017 · 3 comments

Comments

@zeigerpuppy
Copy link

I am using mermaid to create a gantt diagram.
The diagram is incorporated into LaTeX document using knitr.

At the moment, I am having to hack the size of the diagram because mermaid puts a lot of white space around the image. Is there a way to reduce this whitespace? I couldn't see any ganttConfig options that do this. I am comfortable modifying the mermaid.css in DiagrammeR/htmlwidgets/lib/mermaid/dist/ if this helps but I wasn't sure what the css spec would be there...

knitr chunk code insie a LaTeX \makebox:

\makebox[\textwidth][c]{

<<GANTT, echo=FALSE, out.width='1.5\\linewidth', fig.align='center'>>=
library("webshot")
library("DiagrammeR")
library("htmltools")

m1 <- mermaid("
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
")

# formatting trick for dates  https://github.com/rich-iannone/DiagrammeR/issues/77
m1$x$config = list(ganttConfig = list(
    titleTopMargin = 35,
    axisFormatter = list(list(
    "%b %d, %Y" # date format to return; see d3 time formatting
    ,htmlwidgets::JS(
      'function(d){ return d.getDay() == 1 }' # filter for Mondays or day of week = 1
    )
  ))
))

m1
@
}
@zeigerpuppy
Copy link
Author

another lead, maybe this is set by htmlwidgets?

https://cran.r-project.org/web/packages/htmlwidgets/vignettes/develop_sizing.html

@tylerlong
Copy link
Collaborator

tylerlong commented Mar 17, 2018

With the latest version, you can configure gantt like this:

mermaid.initialize({
  gantt: {
    topPadding: 10,
    leftPadding: 10
  }
})

Available options:

  gantt: {
    /**
     * **titleTopMargin** - margin top for the text over the gantt diagram
     */
    titleTopMargin: 25,

    /**
     * **barHeight** - the height of the bars in the graph
     */
    barHeight: 20,

    /**
     * **barGap** - the margin between the different activities in the gantt diagram
     */
    barGap: 4,

    /**
     *  **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
     */
    topPadding: 50,

    /**
     *  **leftPadding** - the space allocated for the section name to the left of the activities.
     */
    leftPadding: 75,

    /**
     *  **gridLineStartPadding** - Vertical starting position of the grid lines
     */
    gridLineStartPadding: 35,

    /**
     *  **fontSize** - font size ...
     */
    fontSize: 11,

    /**
     * **fontFamily** - font family ...
     */
    fontFamily: '"Open-Sans", "sans-serif"',

    /**
     * **numberSectionStyles** - the number of alternating section styles
     */
    numberSectionStyles: 4,

    /**
     * **axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences
     */
    axisFormat: '%Y-%m-%d'
  },

@enginetix
Copy link

How to do apply the mermaid.initialize from within R?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants