chartwerk.text

Text elements for the chart.

All text elements expect certain chart elements to exist with an id property, which the text elements are rendered into. See the configurable HTML script for an example of the minimum required structure.

text.headline

The headline. Text may contain markdown syntax. Rendered into a chart element with the ID #headline.

<h2 id="headline"></h2>

text.chatter

The chatter. Text may contain markdown syntax. Rendered into a chart element with the ID #chatter.

<div id="chatter"></div>

text.footnote

A footnote. Text may contain markdown syntax. Rendered into a chart element with the ID #footnote.

<div id="footnote"></div>

text.source

The data source for the chart. Text may contain markdown syntax. Rendered into a chart element with the ID #source.

<div id="source"></div>

text.author

The author of the chart. Text may contain markdown syntax. Rendered into a chart element with the ID #author.

<div id="author"></div>

text.annotations

Free text annotations are represented as an array of objects. They are rendered as absolutely positioned HTML elements.

[
  {
    size: 's',
    w: 100,
    x: 10,
    y: 15,
    align: 'l',
    fontSize: 'm',
    background: false,
    text: 'This is a **text** note.',
    color: '#2d3035'
  }
]
text.legend

The legend contains properties to draw chart keys. Legends are HTML elements, either flowed above the chart or absolutely positioned within the chart space.

text.legend.active

Boolean weather the user has opted to create a color legend for the chart.

text.legend.keys

Keys are an array of objects:

[
  {
    color: "#FF0000",
    text: "Republican"
  },
  {
    color: "#0000FF",
    text: "Democrat"
  }
]

color is derived from the range array of the color axis.

text is input by the user. When using a quantized color scale, the text is pre-filled with the minimum value of each color bin but is overwritable by the user.

text.legend.title

A title for the legend.

text.legend.{single|double}

Independent legend options for single or double-column size charts.

text.legend.{single|double}.inside

Boolean whether to display the legend within the chart space. If false, assumed to display flowed above.

Flow of individual keys is presumed to be left-to-right when rendering the legend above the chart and top-to-bottom, i.e., stacked, when rendered within the chart space.

text.legend.{single|double}.align

Either l or r for left or right aligning the chart container above the chart. Option only displayed when legend.{single|double}.inside is false.

text.legend.{single|double}.background

Boolean whether to draw a background behind the legend. Option only displayed when legend.{single|double}.inside is true.

text.legend.{single|double}.width

Width in pixels of the legend container.

text.legend.{single|double}.position

An object containing x and y position of the legend container within the chart space. Option only displayed when legend.{single|double}.inside is true.

{
  x: 10,
  y: 15
}

results matching ""

    No results matching ""