New plugin: subtitle

docs/.vuepress/config.js

@@ -217,6 +217,11 @@ module.exports = {
           ]
         },
         {
+          title: 'Subtitle',
+          children: [
+            'subtitle/basic',
+          ]
+        },        {
           title: 'Tooltip',
           children: [
             'tooltip/position',
@@ -304,6 +309,7 @@ module.exports = {
             'configuration/layout',
             'configuration/legend',
             'configuration/title',
+            'configuration/subtitle',
             'configuration/tooltip',
             'configuration/elements',
             'configuration/decimation'

docs/configuration/subtitle.md

@@ -0,0 +1,28 @@
+# Subtitle
+
+Subtitle is a second title placed under the main title, by default. It has exactly the same configuration options with the main [title](./title.md).
+
+## Subtitle Configuration
+
+Namespace: `options.plugins.subtitle`. The global defaults for subtitle are configured in `Chart.defaults.plugins.subtitle`.
+
+Excactly the same configuration options with [title](./title.md) are available for subtitle, the namespaces only differ.
+
+## Example Usage
+
+The example below would enable a title of 'Custom Chart Subtitle' on the chart that is created.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        plugins: {
+            subtitle: {
+                display: true,
+                text: 'Custom Chart Subtitle'
+            }
+        }
+    }
+});
+```

docs/samples/subtitle/basic.md

@@ -0,0 +1,55 @@
+# Basic
+
+This sample shows basic usage of subtitle.
+
+```js chart-editor
+// <block:setup:1>
+const DATA_COUNT = 7;
+const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
+const data = {
+  labels: Utils.months({count: DATA_COUNT}),
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: Utils.numbers(NUMBER_CFG),
+      fill: false,
+      borderColor: Utils.CHART_COLORS.red,
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
+    },
+  ]
+};
+// </block:setup>
+
+// <block:config:0>
+const config = {
+  type: 'line',
+  data: data,
+  options: {
+    plugins: {
+      title: {
+        display: true,
+        text: 'Chart Title',
+      },
+      subtitle: {
+        display: true,
+        text: 'Chart Subtitle',
+        color: 'blue',
+        font: {
+          size: 12,
+          family: 'tahoma',
+          weight: 'normal',
+          style: 'italic'
+        },
+        padding: {
+          bottom: 10
+        }
+      }
+    }
+  }
+};
+// </block:config>
+
+module.exports = {
+  config: config,
+};
+```

src/plugins/index.js

@@ -1,5 +1,6 @@
 export {default as Decimation} from './plugin.decimation';
 export {default as Filler} from './plugin.filler';
 export {default as Legend} from './plugin.legend';
+export {default as SubTitle} from './plugin.subtitle';
 export {default as Title} from './plugin.title';
 export {default as Tooltip} from './plugin.tooltip';

src/plugins/plugin.subtitle.js

@@ -0,0 +1,53 @@
+import {Title} from './plugin.title';
+import layouts from '../core/core.layouts';
+
+const map = new WeakMap();
+
+export default {
+  id: 'subtitle',
+
+  start(chart, _args, options) {
+    const title = new Title({
+      ctx: chart.ctx,
+      options,
+      chart
+    });
+
+    layouts.configure(chart, title, options);
+    layouts.addBox(chart, title);
+    map.set(chart, title);
+  },
+
+  stop(chart) {
+    layouts.removeBox(chart, map.get(chart));
+    map.delete(chart);
+  },
+
+  beforeUpdate(chart, _args, options) {
+    const title = map.get(chart);
+    layouts.configure(chart, title, options);
+    title.options = options;
+  },
+
+  defaults: {
+    align: 'center',
+    display: false,
+    font: {
+      weight: 'normal',
+    },
+    fullSize: true,
+    padding: 0,
+    position: 'top',
+    text: '',
+    weight: 1500         // by default greater than legend (1000) and smaller that title (2000)
+  },
+
+  defaultRoutes: {
+    color: 'color'
+  },
+
+  descriptors: {
+    _scriptable: true,
+    _indexable: false,
+  },
+};

test/fixtures/plugin.subtitle/basic.js

@@ -0,0 +1,41 @@
+
+module.exports = {
+  config: {
+    type: 'scatter',
+    data: {
+      datasets: [{
+        data: [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}],
+        backgroundColor: 'red',
+        radius: 1,
+        hoverRadius: 0
+      }],
+    },
+    options: {
+      scales: {
+        x: {display: false},
+        y: {display: false}
+      },
+      plugins: {
+        legend: false,
+        title: {
+          display: true,
+          text: 'Title Text',
+        },
+        subtitle: {
+          display: true,
+          text: 'SubTitle Text',
+        },
+        filler: false,
+        tooltip: false
+      },
+    },
+
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 400,
+      width: 400
+    }
+  }
+};

test/specs/plugin.subtitle.tests.js

@@ -0,0 +1,3 @@
+describe('plugin.subtitle', function() {
+  describe('auto', jasmine.fixture.specs('plugin.subtitle'));
+});