shown

Statically-generated, responsive charts, without the need for client-side Javascript.

Why use shown?

shown generates simple HTML and SVG charts. The library works with static-site generators (SSG), or in server-side rendering (SSR) contexts to create self-contained, embeddable chart documents. It aims to fill a gap between unresponsive images and complex data visualization tools.

The library offers a high-level API to generate charts, providing good results with minimal configuration. When more flexibility is required, expressive data mapping allows for fine-grained control. Plug and play data from different sources, mapping values as you need them.

Charts adapt to different screen-sizes without any need for client-side JavaScript. Charts will expand and contract to fill their containers without affecting font size, so text remains legible across viewports.

Charts render without client-side JavaScript, reducing bundle sizes and improving performance by avoiding expensive recalculations when a container resizes.

Getting started

Install the library from NPM. You can then import and call the library as needed.

import shown from "shown";

shown.pie({ data: [60, 30, 10] });

Styles

All charts depend on a shared set of minimal CSS styles (/src/css/shown.css). These base styles aren't included in the rendered charts to avoid multiple inclusions on pages that feature more than one chart. Import the styles separately so that styles are included once on each page.

Pie

Generate a pie chart.

pie(options: Object): string

Parameters

options Object

Data and display options for the chart.

NameDescription
options.data
Array<number>		The data for this chart. Values can sum to any number, and percentages will be calculated as needed.
options.title
string?		The title for this chart, set to the <title> element for better accessibility.
options.description
string?		The description for this chart, set to the <desc> element for better accessibility.
options.sorted
boolean?		Whether to sort the values.
The default value is true.
options.map
MapOptions?		Controls for transforming data. See MapOptions for more details.
options.startAngle
number?		The initial rotation of the chart. Angle values should fall between zero and one.
The default value is 0.
options.endAngle
number?		The final rotation of the chart. Angle values should fall between zero and one.
The default value is 1.

Returns

string Rendered chart

Examples

shown.pie({ data: [60, 30, 10] });
<div class="shown"><div class="chart chart-pie"><div class="chart-pie-wrap" style="aspect-ratio:1"><svg class="chart-pie-svg" xmlns="http://www.w3.org/2000/svg" width="1" height="1"><svg x="50%" y="50%" width="100%" height="100%" role="presentation" text-anchor="middle"><g class="segment segment-0" aria-label="60 (60%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="25%" stroke="#0036b0" stroke-dasharray="94.25% 62.83%" stroke-dashoffset="39.27%" stroke-width="50%" fill="none"></circle></svg><text class="segment-label" x="23.78%" y="7.73%" role="presentation" color="#fff">60</text></g><g class="segment segment-1" aria-label="30 (30%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="25%" stroke="#e54670" stroke-dasharray="47.12% 109.96%" stroke-dashoffset="-54.98%" stroke-width="50%" fill="none"></circle></svg><text class="segment-label" x="-25%" y="0%" role="presentation" color="#fff">30</text></g><g class="segment segment-2" aria-label="10 (10%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="25%" stroke="#ffca01" stroke-dasharray="15.71% 141.37%" stroke-dashoffset="-102.1%" stroke-width="50%" fill="none"></circle></svg><text class="segment-label" x="-9.27%" y="-28.53%" role="presentation">10</text></g></svg></svg></div></div></div>
shown.pie({
   title: "Donut Chart",
   data: [{ n: 120 }, { n: 300 }, { n: 180 }],
   map: {
     value: (d, i) => d.n,
     label: (d, i) => "$" + d.n,
     color: ["#fc6", "#fa0", "#fb3"],
     width: 0.6
   },
 })
<div class="shown"><div class="chart chart-pie"><div class="chart-pie-wrap" style="aspect-ratio:1"><svg class="chart-pie-svg" xmlns="http://www.w3.org/2000/svg" width="1" height="1"><title>Donut Chart</title><svg x="50%" y="50%" width="100%" height="100%" role="presentation" text-anchor="middle"><g class="segment segment-0" aria-label="$300 (50%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="35%" stroke="#fa0" stroke-dasharray="109.96% 109.96%" stroke-dashoffset="54.98%" stroke-width="30%" fill="none"></circle></svg><text class="segment-label" x="35%" y="0" role="presentation">$300</text></g><g class="segment segment-1" aria-label="$180 (30%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="35%" stroke="#fb3" stroke-dasharray="65.97% 153.94%" stroke-dashoffset="-54.98%" stroke-width="30%" fill="none"></circle></svg><text class="segment-label" x="-28.32%" y="20.57%" role="presentation">$180</text></g><g class="segment segment-2" aria-label="$120 (20%)" alignment-baseline="central"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="35%" stroke="#fc6" stroke-dasharray="43.98% 175.93%" stroke-dashoffset="-120.95%" stroke-width="30%" fill="none"></circle></svg><text class="segment-label" x="-20.57%" y="-28.32%" role="presentation">$120</text></g></svg></svg></div></div></div>
shown.pie({
  title: "Gauge Chart",
  data: [60, 30, 10],
  startAngle: -0.33,
  endAngle: 0.33,
  map: {
    width: 0.4,
    key: ["Item 1", "Item 2", "Item 3"],
    attrs: (d) => ({ "data-value": d })
  }
});
<div class="shown"><div class="chart chart-pie"><div class="chart-pie-wrap" style="aspect-ratio:1.35"><svg class="chart-pie-svg" xmlns="http://www.w3.org/2000/svg" width="1" height="0.741"><title>Gauge Chart</title><svg x="50%" y="67.49%" width="100%" height="134.98%" role="presentation" text-anchor="middle"><g class="segment segment-0" aria-label="60 (39.6%)" alignment-baseline="central" data-value="60"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="40%" stroke="#0036b0" stroke-dasharray="99.53% 151.8%" stroke-dashoffset="145.77%" stroke-width="20%" fill="none"></circle></svg><text class="segment-label" x="-29.5%" y="-27.01%" role="presentation" color="#fff">60</text></g><g class="segment segment-1" aria-label="30 (19.8%)" alignment-baseline="central" data-value="30"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="40%" stroke="#e54670" stroke-dasharray="49.76% 201.56%" stroke-dashoffset="46.24%" stroke-width="20%" fill="none"></circle></svg><text class="segment-label" x="34.43%" y="-20.36%" role="presentation" color="#fff">30</text></g><g class="segment segment-2" aria-label="10 (6.6%)" alignment-baseline="central" data-value="10"><svg viewBox="0 0 100 100"><circle class="segment-arc" role="presentation" r="40%" stroke="#ffca01" stroke-dasharray="16.59% 234.74%" stroke-dashoffset="-3.52%" stroke-width="20%" fill="none"></circle></svg><text class="segment-label" x="38.27%" y="11.64%" role="presentation">10</text></g></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>Item 1</span></li><li><svg role="presentation" class="legend-marker" style="color:#e54670"><rect width="100%" height="100%"></rect></svg><span>Item 2</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>Item 3</span></li></ul></div></div>

Bar

Generate a bar chart.

bar(options: Object): string

Parameters

options Object

Data and display options for the chart.

NameDescription
options.data
Array<any>		The data for this chart. Data can be passed either as a flat array of numbers, or a array of arrays for a stacked bar chart.
options.title
string?		The title for this chart, set to the <title> element for better accessibility.
options.description
string?		The description for this chart, set to the <desc> element for better accessibility.
options.map
MapOptions?		Controls for transforming data. See MapOptions for more details.
options.stack
Boolean?		Whether to stack nested values or render them side-by-side. If values are nested three-levels deep, items will always be stacked.
The default value is false.
options.xAxis
AxisOptions?		Overrides for the x-axis. See AxisOptions for more details.
options.yAxis
AxisOptions?		Overrides for the y-axis. See AxisOptions for more details.

Returns

string Rendered chart

Examples

shown.bar({
  data: [
     3.57773343,
     5.72659784,
     0.93839406,
     4.13082349,
     3.12045823,
  ],
})
<div class="shown"><div class="chart chart-bar has-yaxis yaxis-w1"><div style="flex-grow:1;height:0;text-anchor:middle;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="10%"></svg><svg x="30%"></svg><svg x="50%"></svg><svg x="70%"></svg><svg x="90%"></svg></svg><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="83.33%"><text class="axis-label" x="-0.5em">1</text><line class="axis-line" x2="100%"></line></svg><svg y="66.67%"><text class="axis-label" x="-0.5em">2</text><line class="axis-line" x2="100%"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">3</text><line class="axis-line" x2="100%"></line></svg><svg y="33.33%"><text class="axis-label" x="-0.5em">4</text><line class="axis-line" x2="100%"></line></svg><svg y="16.67%"><text class="axis-label" x="-0.5em">5</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">6</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="values"><svg x="0" width="20%" class="group group-0"><svg class="series series-0" x="50%" width="60%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="40.37%" height="59.63%" width="100%" fill="#0036b0"></rect></svg><text y="40.37%" dy="-0.5em">3.58</text></svg></svg><svg x="20%" width="20%" class="group group-1"><svg class="series series-0" x="50%" width="60%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="4.56%" height="95.44%" width="100%" fill="#0036b0"></rect></svg><text y="4.56%" dy="-0.5em">5.73</text></svg></svg><svg x="40%" width="20%" class="group group-2"><svg class="series series-0" x="50%" width="60%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="84.36%" height="15.64%" width="100%" fill="#0036b0"></rect></svg><text y="84.36%" dy="-0.5em">0.94</text></svg></svg><svg x="60%" width="20%" class="group group-3"><svg class="series series-0" x="50%" width="60%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="31.15%" height="68.85%" width="100%" fill="#0036b0"></rect></svg><text y="31.15%" dy="-0.5em">4.13</text></svg></svg><svg x="80%" width="20%" class="group group-4"><svg class="series series-0" x="50%" width="60%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="47.99%" height="52.01%" width="100%" fill="#0036b0"></rect></svg><text y="47.99%" dy="-0.5em">3.12</text></svg></svg></svg></svg></div></div></div>
shown.bar({
  title: "Bar Chart",
  data: [
     [6286, 1065],
     [4197, 1853],
     [3444, 1479],
  ],
  map: { key: ["A", "B"] },
  xAxis: { label: ["I", "II", "III"] }
})
<div class="shown"><div class="chart chart-bar has-xaxis xaxis-w3 has-yaxis yaxis-w4"><div style="flex-grow:1;height:0;text-anchor:middle;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Bar Chart</title><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="16.67%"><text class="axis-label" y="100%" dy="1.5em">I</text><line class="axis-line" x1="-16.67%" x2="-16.67%" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">II</text><line class="axis-line" x1="-16.67%" x2="-16.67%" y2="100%"></line></svg><svg x="83.33%"><text class="axis-label" y="100%" dy="1.5em">III</text><line class="axis-line" x1="-16.67%" x2="-16.67%" y2="100%"></line><line class="axis-line" x1="16.67%" x2="16.67%" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="85.71%"><line class="axis-line" x2="100%"></line></svg><svg y="71.43%"><text class="axis-label" x="-0.5em">2000</text><line class="axis-line" x2="100%"></line></svg><svg y="57.14%"><line class="axis-line" x2="100%"></line></svg><svg y="42.86%"><text class="axis-label" x="-0.5em">4000</text><line class="axis-line" x2="100%"></line></svg><svg y="28.57%"><line class="axis-line" x2="100%"></line></svg><svg y="14.29%"><text class="axis-label" x="-0.5em">6000</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="values"><svg x="0%" width="33.33%" class="group group-0"><svg class="series series-0" x="30%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="10.2%" height="89.8%" width="100%" fill="#0036b0"></rect></svg><text y="10.2%" dy="-0.5em">6286</text></svg><svg class="series series-1" x="70%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="84.79%" height="15.21%" width="100%" fill="#ffca01"></rect></svg><text y="84.79%" dy="-0.5em">1065</text></svg></svg><svg x="33.33%" width="33.33%" class="group group-1"><svg class="series series-0" x="30%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="40.04%" height="59.96%" width="100%" fill="#0036b0"></rect></svg><text y="40.04%" dy="-0.5em">4197</text></svg><svg class="series series-1" x="70%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="73.53%" height="26.47%" width="100%" fill="#ffca01"></rect></svg><text y="73.53%" dy="-0.5em">1853</text></svg></svg><svg x="66.67%" width="33.33%" class="group group-2"><svg class="series series-0" x="30%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="50.8%" height="49.2%" width="100%" fill="#0036b0"></rect></svg><text y="50.8%" dy="-0.5em">3444</text></svg><svg class="series series-1" x="70%" width="30%"><svg class="value value-0" alignment-baseline="central"><rect x="-50%" y="78.87%" height="21.13%" width="100%" fill="#ffca01"></rect></svg><text y="78.87%" dy="-0.5em">1479</text></svg></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>A</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>B</span></li></ul></div></div>
shown.bar({
  title: "Bar Chart",
  data: [
     [62.86, 10.65, 14.54, 10.09, 1.86],
     [41.97, 18.53, 11.71, 17.85, 9.94],
     [34.44, 14.79, 30.64, 18.31, 1.82],
  ],
  map: {
    width: (v) => v === 30.64 ? 0.8 : 0.6,
    label: (v) => v === 30.64 ? v.toFixed(1) : false,
    key: ["A", "B", "C", "D", "E"],
  },
  stack: true,
  xAxis: { label: ["I", "II", "III"] }
})
<div class="shown"><div class="chart chart-bar has-xaxis xaxis-w3 has-yaxis yaxis-w3"><div style="flex-grow:1;height:0;text-anchor:middle;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Bar Chart</title><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="16.67%"><text class="axis-label" y="100%" dy="1.5em">I</text></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">II</text></svg><svg x="83.33%"><text class="axis-label" y="100%" dy="1.5em">III</text></svg></svg><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="80%"><text class="axis-label" x="-0.5em">20</text><line class="axis-line" x2="100%"></line></svg><svg y="60%"><text class="axis-label" x="-0.5em">40</text><line class="axis-line" x2="100%"></line></svg><svg y="40%"><text class="axis-label" x="-0.5em">60</text><line class="axis-line" x2="100%"></line></svg><svg y="20%"><text class="axis-label" x="-0.5em">80</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">100</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="values"><svg x="0%" width="33.33%" class="group group-0"><svg class="series series-0" x="50%" width="80%"><svg class="value value-0" alignment-baseline="central"><rect x="-37.5%" y="37.14%" height="62.86%" width="75%" fill="#0036b0"></rect></svg><svg class="value value-1" alignment-baseline="central"><rect x="-37.5%" y="26.49%" height="10.65%" width="75%" fill="#9b41cf"></rect></svg><svg class="value value-2" alignment-baseline="central"><rect x="-37.5%" y="11.95%" height="14.54%" width="75%" fill="#e54670"></rect></svg><svg class="value value-3" alignment-baseline="central"><rect x="-37.5%" y="1.86%" height="10.09%" width="75%" fill="#fe6934"></rect></svg><svg class="value value-4" alignment-baseline="central"><rect x="-37.5%" y="0" height="1.86%" width="75%" fill="#ffca01"></rect></svg></svg></svg><svg x="33.33%" width="33.33%" class="group group-1"><svg class="series series-0" x="50%" width="80%"><svg class="value value-0" alignment-baseline="central"><rect x="-37.5%" y="58.03%" height="41.97%" width="75%" fill="#0036b0"></rect></svg><svg class="value value-1" alignment-baseline="central"><rect x="-37.5%" y="39.5%" height="18.53%" width="75%" fill="#9b41cf"></rect></svg><svg class="value value-2" alignment-baseline="central"><rect x="-37.5%" y="27.79%" height="11.71%" width="75%" fill="#e54670"></rect></svg><svg class="value value-3" alignment-baseline="central"><rect x="-37.5%" y="9.94%" height="17.85%" width="75%" fill="#fe6934"></rect></svg><svg class="value value-4" alignment-baseline="central"><rect x="-37.5%" y="0" height="9.94%" width="75%" fill="#ffca01"></rect></svg></svg></svg><svg x="66.67%" width="33.33%" class="group group-2"><svg class="series series-0" x="50%" width="80%"><svg class="value value-0" alignment-baseline="central"><rect x="-37.5%" y="65.56%" height="34.44%" width="75%" fill="#0036b0"></rect></svg><svg class="value value-1" alignment-baseline="central"><rect x="-37.5%" y="50.77%" height="14.79%" width="75%" fill="#9b41cf"></rect></svg><svg class="value value-2" alignment-baseline="central"><rect x="-50%" y="20.13%" height="30.64%" width="100%" fill="#e54670"></rect><text y="35.45%" color="#fff">30.6</text></svg><svg class="value value-3" alignment-baseline="central"><rect x="-37.5%" y="1.82%" height="18.31%" width="75%" fill="#fe6934"></rect></svg><svg class="value value-4" alignment-baseline="central"><rect x="-37.5%" y="0" height="1.82%" width="75%" fill="#ffca01"></rect></svg></svg></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>A</span></li><li><svg role="presentation" class="legend-marker" style="color:#9b41cf"><rect width="100%" height="100%"></rect></svg><span>B</span></li><li><svg role="presentation" class="legend-marker" style="color:#e54670"><rect width="100%" height="100%"></rect></svg><span>C</span></li><li><svg role="presentation" class="legend-marker" style="color:#fe6934"><rect width="100%" height="100%"></rect></svg><span>D</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>E</span></li></ul></div></div>
shown.bar({
  title: "Stacked Series",
  data: [
    [
      [10.65, 14.54],
      [18.53, 11.71],
      [14.79, 30.64],
    ], [
      [10.09, 21.86],
      [17.85, 19.94],
      [18.31, 11.82],
    ]
  ],
  map: {
    key: ["In", "Out"],
    series: ["A", "B", "C"],
    value: Math.round,
    tally: true,
    label: true,
    attrs: (d) => ({ "data-value": d })
  },
  xAxis: { label: ["I", "II"] }
})
<div class="shown"><div class="chart chart-bar has-xaxis xaxis-w2 has-yaxis yaxis-w2 has-series"><div style="flex-grow:1;height:0;text-anchor:middle;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Stacked Series</title><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="25%"><text class="axis-label" y="100%" dy="3em">I</text><line class="axis-line" x1="-25%" x2="-25%" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="75%"><text class="axis-label" y="100%" dy="3em">II</text><line class="axis-line" x1="-25%" x2="-25%" y2="100%"></line><line class="axis-line" x1="25%" x2="25%" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="80%"><text class="axis-label" x="-0.5em">10</text><line class="axis-line" x2="100%"></line></svg><svg y="60%"><text class="axis-label" x="-0.5em">20</text><line class="axis-line" x2="100%"></line></svg><svg y="40%"><text class="axis-label" x="-0.5em">30</text><line class="axis-line" x2="100%"></line></svg><svg y="20%"><text class="axis-label" x="-0.5em">40</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">50</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="values"><svg x="0" width="50%" class="group group-0"><svg class="series series-0" x="22%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="10.65"><rect x="-50%" y="78%" height="22%" width="100%" fill="#0036b0"></rect><text y="89%" color="#fff">11</text></svg><svg class="value value-1" alignment-baseline="central" data-value="14.54"><rect x="-50%" y="48%" height="30%" width="100%" fill="#ffca01"></rect><text y="63%">15</text></svg><text y="48%" dy="-0.5em">26</text><text class="series-label" y="100%" dy="1.5em">A</text></svg><svg class="series series-1" x="50%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="18.53"><rect x="-50%" y="62%" height="38%" width="100%" fill="#0036b0"></rect><text y="81%" color="#fff">19</text></svg><svg class="value value-1" alignment-baseline="central" data-value="11.71"><rect x="-50%" y="38%" height="24%" width="100%" fill="#ffca01"></rect><text y="50%">12</text></svg><text y="38%" dy="-0.5em">31</text><text class="series-label" y="100%" dy="1.5em">B</text></svg><svg class="series series-2" x="78%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="14.79"><rect x="-50%" y="70%" height="30%" width="100%" fill="#0036b0"></rect><text y="85%" color="#fff">15</text></svg><svg class="value value-1" alignment-baseline="central" data-value="30.64"><rect x="-50%" y="8%" height="62%" width="100%" fill="#ffca01"></rect><text y="39%">31</text></svg><text y="8%" dy="-0.5em">46</text><text class="series-label" y="100%" dy="1.5em">C</text></svg></svg><svg x="50%" width="50%" class="group group-1"><svg class="series series-0" x="22%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="10.09"><rect x="-50%" y="80%" height="20%" width="100%" fill="#0036b0"></rect><text y="90%" color="#fff">10</text></svg><svg class="value value-1" alignment-baseline="central" data-value="21.86"><rect x="-50%" y="36%" height="44%" width="100%" fill="#ffca01"></rect><text y="58%">22</text></svg><text y="36%" dy="-0.5em">32</text><text class="series-label" y="100%" dy="1.5em">A</text></svg><svg class="series series-1" x="50%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="17.85"><rect x="-50%" y="64%" height="36%" width="100%" fill="#0036b0"></rect><text y="82%" color="#fff">18</text></svg><svg class="value value-1" alignment-baseline="central" data-value="19.94"><rect x="-50%" y="24%" height="40%" width="100%" fill="#ffca01"></rect><text y="44%">20</text></svg><text y="24%" dy="-0.5em">38</text><text class="series-label" y="100%" dy="1.5em">B</text></svg><svg class="series series-2" x="78%" width="20%"><svg class="value value-0" alignment-baseline="central" data-value="18.31"><rect x="-50%" y="64%" height="36%" width="100%" fill="#0036b0"></rect><text y="82%" color="#fff">18</text></svg><svg class="value value-1" alignment-baseline="central" data-value="11.82"><rect x="-50%" y="40%" height="24%" width="100%" fill="#ffca01"></rect><text y="52%">12</text></svg><text y="40%" dy="-0.5em">30</text><text class="series-label" y="100%" dy="1.5em">C</text></svg></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>In</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>Out</span></li></ul></div></div>

Line

Generate a line chart.

line(options: Object): string

Parameters

options Object

Data and display options for the chart.

NameDescription
options.data
Array<any>		The data for this chart. Data can be passed either as a flat array for a single line, or nested arrays for multiple lines.
options.title
string?		The title for this chart, set to the <title> element for better accessibility.
options.description
string?		The description for this chart, set to the <desc> element for better accessibility.
options.map
MapOptions?		Controls for transforming data. See MapOptions for more details.
options.showGaps
Boolean?		Points in the line with non-finite values are rendered as broken lines where data is unavailable. Set to false to skip missing values instead.
The default value is true.
options.xAxis
AxisOptions?		Overrides for the x-axis. See AxisOptions for more details.
options.yAxis
AxisOptions?		Overrides for the y-axis. See AxisOptions for more details.
options.area
Boolean?		Render the line chart as an area chart.
The default value is false.
options.scatter
Boolean?		Render the line chart as a scatter plot.
The default value is false.
options.sorted
Boolean?		Whether to sort the values.
The default value is false.
options.smartLabels
Boolean?		Labels are shifted to minimise overlapping the line.
The default value is true.

Returns

string Rendered chart

Examples

shown.line({
  title: "Custom axis",
  data: [
    -0.0327,  0.05811,  0.18046,  0.27504,  0.43335,  0.43815,
    0.54249,  0.57011,  0.54897,  0.60961,  0.58727,  0.53557,
    0.55060,      NaN,    null, undefined,    false,  0.02642,
    -0.0097,  -0.1826,  -0.2999,  -0.3352,  -0.4735,  -0.4642,
    -0.5720,  -0.6065,  -0.5761,  -0.5724,  -0.6096,  -0.5314,
    -0.4492,  -0.4007,  -0.3008,  -0.1924,  -0.0696,  0.00279,
  ],
  xAxis: { min: 1988, max: 2023 },
  yAxis: { ticks: 15, label: (v, i) => (i % 2 !== 0) && v.toFixed(1) },
})
<div class="shown"><div class="chart chart-line has-xaxis xaxis-w4 has-yaxis yaxis-w4"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Custom axis</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><line class="axis-line" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="92.86%"><text class="axis-label" x="-0.5em">-0.6</text><line class="axis-line" x2="100%"></line></svg><svg y="85.71%"><line class="axis-line" x2="100%"></line></svg><svg y="78.57%"><text class="axis-label" x="-0.5em">-0.4</text><line class="axis-line" x2="100%"></line></svg><svg y="71.43%"><line class="axis-line" x2="100%"></line></svg><svg y="64.29%"><text class="axis-label" x="-0.5em">-0.2</text><line class="axis-line" x2="100%"></line></svg><svg y="57.14%"><line class="axis-line" x2="100%"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">0.0</text><line class="axis-base" x2="100%"></line></svg><svg y="42.86%"><line class="axis-line" x2="100%"></line></svg><svg y="35.71%"><text class="axis-label" x="-0.5em">0.2</text><line class="axis-line" x2="100%"></line></svg><svg y="28.57%"><line class="axis-line" x2="100%"></line></svg><svg y="21.43%"><text class="axis-label" x="-0.5em">0.4</text><line class="axis-line" x2="100%"></line></svg><svg y="14.29%"><line class="axis-line" x2="100%"></line></svg><svg y="7.14%"><text class="axis-label" x="-0.5em">0.6</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">1988</text><line class="axis-line" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="20%"><text class="axis-label" y="100%" dy="1.5em">1995</text><line class="axis-line" y2="100%"></line></svg><svg x="40%"><text class="axis-label" y="100%" dy="1.5em">2002</text><line class="axis-line" y2="100%"></line></svg><svg x="60%"><text class="axis-label" y="100%" dy="1.5em">2009</text><line class="axis-line" y2="100%"></line></svg><svg x="80%"><text class="axis-label" y="100%" dy="1.5em">2016</text><line class="axis-line" y2="100%"></line></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">2023</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#0036b0" fill="none" d="M0 52.34L2.86 45.85L5.71 37.11L8.57 30.35L11.43 19.05L14.29 18.7L17.14 11.25L20 9.28L22.86 10.79L25.71 6.46L28.57 8.05L31.43 11.74L34.29 10.67M48.57 48.11L51.43 50.69L54.29 63.04L57.14 71.42L60 73.94L62.86 83.82L65.71 83.16L68.57 90.86L71.43 93.32L74.29 91.15L77.14 90.89L80 93.54L82.86 87.96L85.71 82.09L88.57 78.62L91.43 71.49L94.29 63.74L97.14 54.97L100 49.8"></path></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"></svg></svg></svg></div></div></div>
shown.line({
  title: "Map x and y data",
  data: [{x: 0, y: 1}, {x: 1, y: -1}, {x: 2, y: 1}],
  map: {
    x: (d) => d.x,
    y: (d) => d.y,
    curve: "bump",
  }
})
<div class="shown"><div class="chart chart-line has-xaxis xaxis-w1 has-yaxis yaxis-w2"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Map x and y data</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">-1</text><line class="axis-line" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">1</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="25%"><line class="axis-line" y2="100%"></line></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">1</text><line class="axis-line" y2="100%"></line></svg><svg x="75%"><line class="axis-line" y2="100%"></line></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">2</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#0036b0" fill="none" d="M0 0c20 0 30 100 50 100c20 0 30-100 50-100"></path></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"></svg></svg></svg></div></div></div>
shown.line({
  title: "Multiple lines, curves and shapes",
  data: [
     [52.86, 20.65, 14.54, 10.09, 41.86],
     [21.97, 31.71, 56.94, 17.85, 23.53],
     [ 6.73, 10.84, 37.62, 45.79, 53.32],
     [38.44, 50.79, 22.31, 31.82,  7.64],
  ],
  map: {
    curve: ["linear", "bump", "monotone", "stepX"],
    shape: ["circle", "square", "triangle", "diamond"],
    key: ["α", "β", "γ", "δ"],
  },
  xAxis: { label: ["A", "B", "C", "D", "E"], inset: 0.1 },
})
<div class="shown"><div class="chart chart-line has-xaxis xaxis-w1 has-yaxis yaxis-w2"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><symbol class="symbol shown" id="symbol-circle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><circle r="4.5"></circle></symbol><symbol class="symbol shown" id="symbol-square" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><path d="M-4-4h8v8h-8Z"></path></symbol><symbol class="symbol shown" id="symbol-triangle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><path d="M0-5L5,4H-5Z"></path></symbol><symbol class="symbol shown" id="symbol-diamond" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><path d="M0-5.5L5.5,0L0,5.5L-5.5,0Z"></path></symbol></defs><title>Multiple lines, curves and shapes</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="75%"><text class="axis-label" x="-0.5em">15</text><line class="axis-line" x2="100%"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">30</text><line class="axis-line" x2="100%"></line></svg><svg y="25%"><text class="axis-label" x="-0.5em">45</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">60</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="10%"><text class="axis-label" y="100%" dy="1.5em">A</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="30%"><text class="axis-label" y="100%" dy="1.5em">B</text><line class="axis-line" y2="100%"></line></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">C</text><line class="axis-line" y2="100%"></line></svg><svg x="70%"><text class="axis-label" y="100%" dy="1.5em">D</text><line class="axis-line" y2="100%"></line></svg><svg x="90%"><text class="axis-label" y="100%" dy="1.5em">E</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#0036b0" fill="none" d="M10 11.9L30 65.58L50 75.77L70 83.18L90 30.23"></path><path class="series series-1" vector-effect="non-scaling-stroke" stroke="#d144d9" fill="none" d="M10 63.38c8 0 12-16.23 20-16.23c8 0 12-42.05 20-42.05c8 0 12 65.15 20 65.15c8 0 12-9.47 20-9.47"></path><path class="series series-2" vector-effect="non-scaling-stroke" stroke="#f64a3a" fill="none" d="M10 88.78C16.67 86.5 23.33 86.5 30 81.93C36.67 77.37 43.33 46.38 50 37.3C56.67 28.22 63.33 28.04 70 23.68C76.67 19.32 83.33 15.32 90 11.13"></path><path class="series series-3" vector-effect="non-scaling-stroke" stroke="#ffca01" fill="none" d="M10 35.93h20v-20.58h20v47.47h20v-15.85h20v40.3"></path></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="11.9%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="30%" y="65.58%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="75.77%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="70%" y="83.18%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="90%" y="30.23%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-1" color="#d144d9" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="63.38%"><use href="#symbol-square" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="30%" y="47.15%"><use href="#symbol-square" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="5.1%"><use href="#symbol-square" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="70%" y="70.25%"><use href="#symbol-square" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="90%" y="60.78%"><use href="#symbol-square" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-2" color="#f64a3a" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="88.78%"><use href="#symbol-triangle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="30%" y="81.93%"><use href="#symbol-triangle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="37.3%"><use href="#symbol-triangle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="70%" y="23.68%"><use href="#symbol-triangle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="90%" y="11.13%"><use href="#symbol-triangle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-3" color="#ffca01" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="35.93%"><use href="#symbol-diamond" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="30%" y="15.35%"><use href="#symbol-diamond" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="62.82%"><use href="#symbol-diamond" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="70%" y="46.97%"><use href="#symbol-diamond" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="90%" y="87.27%"><use href="#symbol-diamond" width="1em" height="1em" class="symbol"></use></svg></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-circle" class="symbol"></use></svg><span>α</span></li><li><svg role="presentation" class="legend-marker" style="color:#d144d9"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-square" class="symbol"></use></svg><span>β</span></li><li><svg role="presentation" class="legend-marker" style="color:#f64a3a"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-triangle" class="symbol"></use></svg><span>γ</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-diamond" class="symbol"></use></svg><span>δ</span></li></ul></div></div>
shown.line({
  title: "Point labels",
  data: [
     [3127, 2106, 1849, null, 4397, 3347],
     [3952, 4222, 4640, 2579, 1521, 1342],
  ],
  map: {
    curve: "monotone",
    shape: "circle",
    color: ["#d4a", "#f84"],
    key: ["Type I", "Type II"],
    label: true,
  },
  xAxis: { inset: 0.1 },
  yAxis: { min: 0, label: (v) => Math.round(v / 1000) + "k" },
})
<div class="shown"><div class="chart chart-line has-xaxis xaxis-w1 has-yaxis yaxis-w2"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><symbol class="symbol shown" id="symbol-circle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><circle r="4.5"></circle></symbol></defs><title>Point labels</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0k</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="80%"><text class="axis-label" x="-0.5em">1k</text><line class="axis-line" x2="100%"></line></svg><svg y="60%"><text class="axis-label" x="-0.5em">2k</text><line class="axis-line" x2="100%"></line></svg><svg y="40%"><text class="axis-label" x="-0.5em">3k</text><line class="axis-line" x2="100%"></line></svg><svg y="20%"><text class="axis-label" x="-0.5em">4k</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">5k</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="10%"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="26%"><text class="axis-label" y="100%" dy="1.5em">1</text><line class="axis-line" y2="100%"></line></svg><svg x="42%"><text class="axis-label" y="100%" dy="1.5em">2</text><line class="axis-line" y2="100%"></line></svg><svg x="58%"><text class="axis-label" y="100%" dy="1.5em">3</text><line class="axis-line" y2="100%"></line></svg><svg x="74%"><text class="axis-label" y="100%" dy="1.5em">4</text><line class="axis-line" y2="100%"></line></svg><svg x="90%"><text class="axis-label" y="100%" dy="1.5em">5</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#d4a" fill="none" d="M10 37.46C15.33 44.27 20.67 54.45 26 57.88C31.33 61.31 36.67 61.31 42 63.02M74 12.06C79.33 19.06 84.67 26.06 90 33.06"></path><path class="series series-1" vector-effect="non-scaling-stroke" stroke="#f84" fill="none" d="M10 20.96C15.33 19.16 20.67 17.85 26 15.56C31.33 13.27 36.67 7.2 42 7.2C47.33 7.2 52.67 38.02 58 48.42C63.33 58.82 68.67 67.19 74 69.58C79.33 71.97 84.67 71.97 90 73.16"></path></svg><svg class="points"><svg class="series series-0" color="#d4a" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="37.46%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">3127</text></svg><svg class="point" x="26%" y="57.88%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">2106</text></svg><svg class="point" x="42%" y="63.02%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">1849</text></svg><svg class="point" x="74%" y="12.06%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">4397</text></svg><svg class="point" x="90%" y="33.06%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">3347</text></svg></svg><svg class="series series-1" color="#f84" text-anchor="middle" alignment-baseline="central"><svg class="point" x="10%" y="20.96%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="0.3em" dy="-1em" text-anchor="end">3952</text></svg><svg class="point" x="26%" y="15.56%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="0.3em" dy="-1em" text-anchor="end">4222</text></svg><svg class="point" x="42%" y="7.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">4640</text></svg><svg class="point" x="58%" y="48.42%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">2579</text></svg><svg class="point" x="74%" y="69.58%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="-0.3em" dy="-1em" text-anchor="start">1521</text></svg><svg class="point" x="90%" y="73.16%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use><text class="label" dx="0.22em" dy="-1em">1342</text></svg></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#d4a"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-circle" class="symbol"></use></svg><span>Type I</span></li><li><svg role="presentation" class="legend-marker" style="color:#f84"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-circle" class="symbol"></use></svg><span>Type II</span></li></ul></div></div>

Area

Generate an area chart.

area(options: Object): string

Parameters

options Object

Data and display options for the chart. Area charts are a wrapper for line charts, with the default options for sorted and area set to true.

NameDescription
options.data
Array<any>		The data for this chart. Data can be passed either as a flat array for a single line, or nested arrays for multiple lines.
options.title
string?		The title for this chart, set to the <title> element for better accessibility.
options.description
string?		The description for this chart, set to the <desc> element for better accessibility.
options.map
MapOptions?		Controls for transforming data. See MapOptions for more details.
options.xAxis
AxisOptions?		Overrides for the x-axis. See AxisOptions for more details.
options.yAxis
AxisOptions?		Overrides for the y-axis. See AxisOptions for more details.
options.sorted
boolean?		Whether to sort the values.
options.smartLabels
Boolean?		Labels are shifted to minimise overlapping the line.

Returns

string Rendered chart

Examples

shown.area({
  title: "Stacked area chart",
  data: [
     [52.86, 20.65, 14.54, 10.09,  8.41],
     [21.97, 31.71,  6.31, 17.85, 23.53],
     [ 6.73, 10.84, 37.62, 45.79, 53.32],
     [38.44, 50.79, 22.31, 31.82,  7.64],
  ],
  map: {
    curve: "monotone",
    key: ["α", "β", "γ", "δ"],
  },
  sorted: true,
  smartLabels: false,
})
<div class="shown"><div class="chart chart-area has-xaxis xaxis-w1 has-yaxis yaxis-w3"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Stacked area chart</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="75%"><text class="axis-label" x="-0.5em">30</text><line class="axis-line" x2="100%"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">60</text><line class="axis-line" x2="100%"></line></svg><svg y="25%"><text class="axis-label" x="-0.5em">90</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">120</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="25%"><text class="axis-label" y="100%" dy="1.5em">1</text><line class="axis-line" y2="100%"></line></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">2</text><line class="axis-line" y2="100%"></line></svg><svg x="75%"><text class="axis-label" y="100%" dy="1.5em">3</text><line class="axis-line" y2="100%"></line></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">4</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="areas" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" fill="#f64a3a" d="M0 0C8.33 1.67 16.67 1.67 25 5.01C33.33 8.35 41.67 32.68 50 32.68C58.33 32.68 66.67 12.04 75 12.04C83.33 12.04 91.67 19.07 100 22.58L100 67.02C91.67 61.41 83.33 50.2 75 50.2C66.67 50.2 58.33 64.03 50 64.03C41.67 64.03 33.33 19.66 25 14.04C16.67 8.42 8.33 8.42 0 5.61Z"></path><path class="series series-1" vector-effect="non-scaling-stroke" fill="#ffca01" d="M0 5.61C8.33 8.42 16.67 8.42 25 14.04C33.33 19.66 41.67 64.03 50 64.03C58.33 64.03 66.67 50.2 75 50.2C83.33 50.2 91.67 61.41 100 67.02L100 73.38C91.67 74.49 83.33 75.18 75 76.72C66.67 78.26 58.33 82.63 50 82.63C41.67 82.63 33.33 63.86 25 56.37C16.67 48.87 8.33 43.88 0 37.64Z"></path><path class="series series-2" vector-effect="non-scaling-stroke" fill="#0036b0" d="M0 37.64C8.33 43.88 16.67 48.87 25 56.37C33.33 63.86 41.67 82.63 50 82.63C58.33 82.63 66.67 78.26 75 76.72C83.33 75.18 91.67 74.49 100 73.38L100 80.39C91.67 81.97 83.33 82.73 75 85.13C66.67 87.52 58.33 94.74 50 94.74C41.67 94.74 33.33 73.58 25 73.58C16.67 73.58 8.33 78.99 0 81.69Z"></path><path class="series series-3" vector-effect="non-scaling-stroke" fill="#d144d9" d="M0 81.69C8.33 78.99 16.67 73.58 25 73.58C33.33 73.58 41.67 94.74 50 94.74C58.33 94.74 66.67 87.52 75 85.13C83.33 82.73 91.67 81.97 100 80.39L100,100L0,100Z"></path></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#d144d9" fill="none" d="M0 81.69C8.33 78.99 16.67 73.58 25 73.58C33.33 73.58 41.67 94.74 50 94.74C58.33 94.74 66.67 87.52 75 85.13C83.33 82.73 91.67 81.97 100 80.39"></path><path class="series series-1" vector-effect="non-scaling-stroke" stroke="#0036b0" fill="none" d="M0 37.64C8.33 43.88 16.67 48.87 25 56.37C33.33 63.86 41.67 82.63 50 82.63C58.33 82.63 66.67 78.26 75 76.72C83.33 75.18 91.67 74.49 100 73.38"></path><path class="series series-2" vector-effect="non-scaling-stroke" stroke="#ffca01" fill="none" d="M0 5.61C8.33 8.42 16.67 8.42 25 14.04C33.33 19.66 41.67 64.03 50 64.03C58.33 64.03 66.67 50.2 75 50.2C83.33 50.2 91.67 61.41 100 67.02"></path><path class="series series-3" vector-effect="non-scaling-stroke" stroke="#f64a3a" fill="none" d="M0 0C8.33 1.67 16.67 1.67 25 5.01C33.33 8.35 41.67 32.68 50 32.68C58.33 32.68 66.67 12.04 75 12.04C83.33 12.04 91.67 19.07 100 22.58"></path></svg><svg class="points"><svg class="series series-0" color="#d144d9" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-1" color="#0036b0" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-2" color="#ffca01" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-3" color="#f64a3a" text-anchor="middle" alignment-baseline="central"></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#d144d9"><rect width="100%" height="100%"></rect></svg><span>β</span></li><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>α</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>δ</span></li><li><svg role="presentation" class="legend-marker" style="color:#f64a3a"><rect width="100%" height="100%"></rect></svg><span>γ</span></li></ul></div></div>
shown.area({
  title: "Discontinuous data is interpolated",
  data: [
    [ 12.2, 19.2, 35.9, 88.1, 12.8, 48.2,      ],
    [ 25.7, 10.1, 48.5, 84.4, 39.6,            ],
    [ 11.0, 43.5, 68.4, 79.6, null, null, 35.4 ],
    [ 20.3, null, 17.5, 71.6, 67.1, 64.1, 25.4 ],
  ],
  map: {
    key: ["A", "B", "C", "D"],
  },
})
<div class="shown"><div class="chart chart-area has-xaxis xaxis-w1 has-yaxis yaxis-w3"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><title>Discontinuous data is interpolated</title><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="75%"><text class="axis-label" x="-0.5em">100</text><line class="axis-line" x2="100%"></line></svg><svg y="50%"><text class="axis-label" x="-0.5em">200</text><line class="axis-line" x2="100%"></line></svg><svg y="25%"><text class="axis-label" x="-0.5em">300</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">400</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="16.67%"><text class="axis-label" y="100%" dy="1.5em">1</text><line class="axis-line" y2="100%"></line></svg><svg x="33.33%"><text class="axis-label" y="100%" dy="1.5em">2</text><line class="axis-line" y2="100%"></line></svg><svg x="50%"><text class="axis-label" y="100%" dy="1.5em">3</text><line class="axis-line" y2="100%"></line></svg><svg x="66.67%"><text class="axis-label" y="100%" dy="1.5em">4</text><line class="axis-line" y2="100%"></line></svg><svg x="83.33%"><text class="axis-label" y="100%" dy="1.5em">5</text><line class="axis-line" y2="100%"></line></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">6</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="areas" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" fill="#ffca01" d="M0 82.7L16.67 77.08L33.33 57.42L50 19.07L66.67 53.91L83.33 59.39L100 84.8L100 91.15L83.33 75.42L66.67 70.68L50 36.98L33.33 61.8L16.67 81.8L0 87.78Z"></path><path class="series series-1" vector-effect="non-scaling-stroke" fill="#f64a3a" d="M0 87.78L16.67 81.8L33.33 61.8L50 36.98L66.67 70.68L83.33 75.42L100 91.15L100 100L83.33 87.95L66.67 86.9L50 56.88L33.33 78.9L16.67 92.67L0 90.53Z"></path><path class="series series-2" vector-effect="non-scaling-stroke" fill="#d144d9" d="M0 90.53L16.67 92.67L33.33 78.9L50 56.88L66.67 86.9L83.33 87.95L100 100L100 100L83.33 87.95L66.67 96.8L50 77.98L33.33 91.03L16.67 95.2L0 96.95Z"></path><path class="series series-3" vector-effect="non-scaling-stroke" fill="#0036b0" d="M0 96.95L16.67 95.2L33.33 91.03L50 77.98L66.67 96.8L83.33 87.95L100 100L100,100L0,100Z"></path></svg><svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="series series-0" vector-effect="non-scaling-stroke" stroke="#0036b0" fill="none" d="M0 96.95L16.67 95.2L33.33 91.03L50 77.98L66.67 96.8L83.33 87.95L100 100"></path><path class="series series-1" vector-effect="non-scaling-stroke" stroke="#d144d9" fill="none" d="M0 90.53L16.67 92.67L33.33 78.9L50 56.88L66.67 86.9L83.33 87.95L100 100"></path><path class="series series-2" vector-effect="non-scaling-stroke" stroke="#f64a3a" fill="none" d="M0 87.78L16.67 81.8L33.33 61.8L50 36.98L66.67 70.68L83.33 75.42L100 91.15"></path><path class="series series-3" vector-effect="non-scaling-stroke" stroke="#ffca01" fill="none" d="M0 82.7L16.67 77.08L33.33 57.42L50 19.07L66.67 53.91L83.33 59.39L100 84.8"></path></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-1" color="#d144d9" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-2" color="#f64a3a" text-anchor="middle" alignment-baseline="central"></svg><svg class="series series-3" color="#ffca01" text-anchor="middle" alignment-baseline="central"></svg></svg></svg></div><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#0036b0"><rect width="100%" height="100%"></rect></svg><span>A</span></li><li><svg role="presentation" class="legend-marker" style="color:#d144d9"><rect width="100%" height="100%"></rect></svg><span>B</span></li><li><svg role="presentation" class="legend-marker" style="color:#f64a3a"><rect width="100%" height="100%"></rect></svg><span>C</span></li><li><svg role="presentation" class="legend-marker" style="color:#ffca01"><rect width="100%" height="100%"></rect></svg><span>D</span></li></ul></div></div>

Scatter

Generate a scatter chart.

scatter(options: Object): string

Parameters

options Object

Data and display options for the chart.

NameDescription
options.data
Array<any>		The data for this chart. Data can be passed either as an array of [x, y] points, or nested arrays for multiple series.
options.title
string?		The title for this chart, set to the <title> element for better accessibility.
options.description
string?		The description for this chart, set to the <desc> element for better accessibility.
options.map
MapOptions?		Controls for transforming data. See MapOptions for more details.
options.xAxis
AxisOptions?		Overrides for the x-axis. See AxisOptions for more details.
options.yAxis
AxisOptions?		Overrides for the y-axis. See AxisOptions for more details.
options.sorted
Boolean?		Whether to sort the values.
options.smartLabels
Boolean?		Labels are shifted to minimise overlapping the line.
The default value is false.

Returns

string Rendered chart

Examples

shown.scatter({
  data: [
    [[ 77,  67], [389, 416], [352, 319], [190, 147], [228, 240], [ 25,  39]],
    [[422, 450], [292, 278], [108, 126], [461, 453], [425, 392], [226, 205]],
    [[113, 141], [317, 291], [356, 357], [349, 302], [161, 192], [424, 419]],
    [[137, 130], [400, 430], [377, 322], [ 30,  48], [131,  56], [268, 258]],
    [[357, 361], [251, 192], [175, 187], [404, 352], [128, 109], [120, 157]],
    [[ 65,  99], [235, 170], [204, 161], [220, 214], [252, 244], [ 44,  97]]
  ]
})
<div class="shown"><div class="chart chart-scatter has-xaxis xaxis-w3 has-yaxis yaxis-w3"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><symbol class="symbol shown" id="symbol-circle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><circle r="4.5"></circle></symbol></defs><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="80%"><text class="axis-label" x="-0.5em">100</text><line class="axis-line" x2="100%"></line></svg><svg y="60%"><text class="axis-label" x="-0.5em">200</text><line class="axis-line" x2="100%"></line></svg><svg y="40%"><text class="axis-label" x="-0.5em">300</text><line class="axis-line" x2="100%"></line></svg><svg y="20%"><text class="axis-label" x="-0.5em">400</text><line class="axis-line" x2="100%"></line></svg><svg y="0"><text class="axis-label" x="-0.5em">500</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="20%"><text class="axis-label" y="100%" dy="1.5em">100</text><line class="axis-line" y2="100%"></line></svg><svg x="40%"><text class="axis-label" y="100%" dy="1.5em">200</text><line class="axis-line" y2="100%"></line></svg><svg x="60%"><text class="axis-label" y="100%" dy="1.5em">300</text><line class="axis-line" y2="100%"></line></svg><svg x="80%"><text class="axis-label" y="100%" dy="1.5em">400</text><line class="axis-line" y2="100%"></line></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">500</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"><svg class="point" x="15.4%" y="86.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="77.8%" y="16.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="70.4%" y="36.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="38%" y="70.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="45.6%" y="52%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="5%" y="92.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-1" color="#7d3fc9" text-anchor="middle" alignment-baseline="central"><svg class="point" x="84.4%" y="10%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="58.4%" y="44.4%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="21.6%" y="74.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="92.2%" y="9.4%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="85%" y="21.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="45.2%" y="59%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-2" color="#de45b4" text-anchor="middle" alignment-baseline="central"><svg class="point" x="22.6%" y="71.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="63.4%" y="41.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="71.2%" y="28.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="69.8%" y="39.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="32.2%" y="61.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="84.8%" y="16.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-3" color="#ef3f49" text-anchor="middle" alignment-baseline="central"><svg class="point" x="27.4%" y="74%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="80%" y="14%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="75.4%" y="35.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="6%" y="90.4%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="26.2%" y="88.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="53.6%" y="48.4%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-4" color="#fe772b" text-anchor="middle" alignment-baseline="central"><svg class="point" x="71.4%" y="27.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50.2%" y="61.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="35%" y="62.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="80.8%" y="29.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="25.6%" y="78.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="24%" y="68.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg><svg class="series series-5" color="#ffca01" text-anchor="middle" alignment-baseline="central"><svg class="point" x="13%" y="80.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="47%" y="66%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="40.8%" y="67.8%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="44%" y="57.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50.4%" y="51.2%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="8.8%" y="80.6%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg></svg></svg></svg></div></div></div>
shown.scatter({
  data: [
    {x: 11, y: 14}, {x: 32, y: 23}, {x: 25, y: 34}, {x: 45, y: 43},
    {x: 31, y: 24}, {x: 31, y: 28}, {x: 29, y: 19}, {x: 40, y: 33},
    {x: 21, y: 34}, {x: 21, y: 38}, {x: 39, y: 29}, {x: 30, y: 33},
    {x: 25, y: 25, special: true}
  ],
  map: {
    x: (d) => d.x,
    y: (d) => d.y,
    shape: d => d.special ? "cross" : "circle",
    label: d => d.special && "Special",
    attrs: (d) => d.special && {
      style: { color: "#fe772b" }
    }
  },
  xAxis: { min: 0, line: (v, i, axis) => v === axis.min || v === axis.max },
  yAxis: { min: 0, line: (v, i, axis) => v === axis.min || v === axis.max },
})
<div class="shown"><div class="chart chart-scatter has-xaxis xaxis-w2 has-yaxis yaxis-w2"><div style="flex-grow:1;height:0;box-sizing:border-box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><symbol class="symbol shown" id="symbol-circle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><circle r="4.5"></circle></symbol><symbol class="symbol shown" id="symbol-cross" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><path d="M-6,0H6M0,-6V6"></path></symbol></defs><svg class="axis axis-y" height="100%" text-anchor="end" alignment-baseline="central"><svg y="100%"><text class="axis-label" x="-0.5em">0</text><line class="axis-base" x2="100%" transform="translate(0 -0.5)"></line></svg><svg y="80%"><text class="axis-label" x="-0.5em">10</text></svg><svg y="60%"><text class="axis-label" x="-0.5em">20</text></svg><svg y="40%"><text class="axis-label" x="-0.5em">30</text></svg><svg y="20%"><text class="axis-label" x="-0.5em">40</text></svg><svg y="0"><text class="axis-label" x="-0.5em">50</text><line class="axis-line" x2="100%" transform="translate(0 0.5)"></line></svg></svg><svg class="axis axis-x" width="100%" text-anchor="middle"><svg x="0"><text class="axis-label" y="100%" dy="1.5em">0</text><line class="axis-base" y2="100%" transform="translate(0.5 0)"></line></svg><svg x="20%"><text class="axis-label" y="100%" dy="1.5em">10</text></svg><svg x="40%"><text class="axis-label" y="100%" dy="1.5em">20</text></svg><svg x="60%"><text class="axis-label" y="100%" dy="1.5em">30</text></svg><svg x="80%"><text class="axis-label" y="100%" dy="1.5em">40</text></svg><svg x="100%"><text class="axis-label" y="100%" dy="1.5em">50</text><line class="axis-line" y2="100%" transform="translate(-0.5 0)"></line></svg></svg><svg class="points"><svg class="series series-0" color="#0036b0" text-anchor="middle" alignment-baseline="central"><svg class="point" x="22%" y="72%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="64%" y="54%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="32%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="90%" y="14%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="62%" y="52%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="62%" y="44%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="58%" y="62%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="80%" y="34%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="42%" y="32%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="42%" y="24%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="78%" y="42%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="60%" y="34%"><use href="#symbol-circle" width="1em" height="1em" class="symbol"></use></svg><svg class="point" x="50%" y="50%" style="color:#fe772b"><use href="#symbol-cross" width="1em" height="1em" class="symbol"></use><text class="label" dx="0em" dy="-1.25em">Special</text></svg></svg></svg></svg></div></div></div>

Legend

Generate a chart legend.

legend(options: Object): string

Parameters

options Object (default {})
NameDescription
options.data
Array<LegendItem>		Mapped data. See LegendItem for more details.
options.line
boolean?		Include a line with each symbol, for use alongside a line chart.
The default value is false.
options.wrap
boolean?		Wrap the template with <div class="shown" /> element. This is required when the legend is rendered separately to ensure scoped styles are applied.
The default value is false.
options.defs
boolean?		Include <symbol> definitions for shapes. If undefined , this defaults to the same value as wrap . Symbol definitions only need to be included once on any page.

Returns

string Rendered legend

Example

shown.legend({
  data: [
    { key: "Item 1", color: "#ea84e1", shape: "circle" },
    { key: "Item 2", color: "#7bcbf0", shape: "square" }
  ],
  line: true,
  wrap: true,
});
<div class="shown"><ul class="legend"><li><svg role="presentation" class="legend-marker" style="color:#ea84e1"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-circle" class="symbol"></use></svg><span>Item 1</span></li><li><svg role="presentation" class="legend-marker" style="color:#7bcbf0"><line x2="100%" y1="50%" y2="50%"></line><use x="50%" y="50%" width="1em" height="1em" href="#symbol-square" class="symbol"></use></svg><span>Item 2</span></li></ul><svg display="none"><defs><symbol class="symbol shown" id="symbol-circle" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><circle r="4.5"></circle></symbol><symbol class="symbol shown" id="symbol-square" viewBox="0 0 10 10"><circle class="touch" r="15"></circle><path d="M-4-4h8v8h-8Z"></path></symbol></defs></svg></div>

LegendItem

Charts render a Legend when needed, passing their internally mapped data. When supplying data for a standalone legend, each item should define these properties.

Properties

NameDescription
key
string		Select the legend key for this item. A legend is only rendered when there is more than one unique key.
color
(string | Array<string>)		Select a color for this item. When an array is passed, the first item in the array is used.
shape
string?		Select a shape for the legend item. Supported shapes include circle | square | triangle | diamond | cross | asterisk .

MapOptions

To render a chart, the data you supply is mapped to various properties. MapOptions provides a flexible way to define how these properties, like value, label and color, will be selected.

Each option can be declared as a function. The function is passed the original datum and indices that correspond to how deeply the datum is nested. For example, bar chart data may be nested up to three levels, while a pie chart's data is always a flat array. Indices start from the top-level array and continue downwards.

However, it's often useful to use a shorthand syntax instead. If the property is an array, the array item at the index corresponding to the value's index is used. If the property is a string or number, that value is used for all items in the data.

For example, both of these declarations will return "black" for the first item in the data and "white" for the second item.

{
  color: function(d, i) { return ["black", "white"][i] },
  color: ["black", "white"]
}

Properties

NameDescription
value
(Function | Array<number> | number)?		Parse the raw value from the supplied data. This function is useful if your data structure wraps each value in an object. The default function returns the value unchanged.
x
(Function | Array<number> | number)?		Parse the x-axis value from the data. This function is useful if your data structure wraps each value in an object. The default function returns the index of the item. Line, Area and Scatter Chart only
y
(Function | Array<number> | number)?		Parse the y-axis value from the data. This function is useful if your data structure wraps each value in an object. The default function returns the value of the item. Line, Area and Scatter Chart only
r
(Function | Array<number> | number)?		Parse the radial size from the data. This function is useful if you want to visualise another dimension in the data. If the radius is not greater than zero, the item isn't be rendered. The default function returns a radial size of 1. Scatter Chart only
label
(Function | Array<string> | string)?		Convert the data into a formatted string. The default function returns the value fixed to the same number of decimals as the most precise value in the dataset. Return false to prevent this label from being rendered. Labels are hidden on line and scatter charts by default.
tally
(Function | Array<string> | string | true)?		Add an additional label summing the total values into a formatted string. If true, the default function returns the value fixed to the same number of decimals as the most precise value in the dataset. Return false to prevent the tally from being rendered. When only a single series is present, the bar chart defaults to using a tally rather than a label. Bar Chart only
color
(Function | Array<string> | string)?		Select a color for the supplied data. The default function returns evenly distributed colors from the default palette. Return an array of two colors to change the color of the label.
shape
(Function | Array<string> | string)?		Select a shape for the supplied data. Supported shapes include circle | square | triangle | diamond | cross | asterisk .
curve
(Function | Array<string> | string)?		Select a curve for the current line. Lines can include multiple curve types. Supported curves include linear | stepX | stepY | stepXMid | stepYMid | monotone | bump .
width
(Function | Array<number> | number)?		Change the size of the object. Return values should fall between 0 and 1.
key
(Function | Array<string> | string)?		Select the legend key for the supplied data. A legend is only rendered when there is more than one unique key.
series
(Function | Array<string> | string)?		Select the series key for the supplied data.
attrs
(Function | Array<Object> | Object)?		Set attributes on the DOM element that corresponds to a data point. This function is useful if you want to override or add arbitrary attributes on the chart. For example, you could add a data-tooltip attribute to trigger tooltips using a JavaScript library.

AxisOptions

For charts that feature an x- or y-axis, shown will automatically try to guess the best way to display the axis based on the chart data. When you need to, use axis options to override the way an axis is displayed. Any settings you provide will always override the defaults.

Properties

NameDescription
min
number?		The minimum value for this axis. The default value is derived from data .
max
number?		The maximum value for this axis. The default value is derived from data .
ticks
number?		The number of divisions to use for this axis. The default value is a derived number between 2 and 13 that best splits the difference between min and max .
label
(function | array)?		A function to map an axis value to a label. The function is passed the current value, index and axis as arguments. When supplying an array, the item at the corresponding index will be selected
line
(function | array)?		A function to toggle an axis line. The function is passed the current value, index and axis as arguments. When supplying an array, the item at the corresponding index will be selected
inset
number?		The amount to inset the first and last tick from the sides of the axis. The value is relative to the width of the chart and should fall between 0 and 1.
spine
boolean?		Whether to render lines at the extreme ends of the axis. This value is only used with a non-zero inset.