/chartjs-subtitle

Add a subtitle to ChartJS

Primary LanguageJavaScriptMIT LicenseMIT

Chart.js Subtitle Plugin

NPM Package

Simple subtitle plugin for Chart.Js

Works with all four title positions and multi-line titles. See more information on standard title options

Install

npm install --save chart.js chartjs-subtitle

Options

The options for the subtitle are based on the options for the existing title

  options: {
    ...

    plugins: {
      chartJsPluginSubtitle: {
        /**
         * is the title shown
         * @member {boolean} display
         * @default false
         */
        display: false,

        /**
         * Font size
         * Expects either a string with `pt` or `px`, or a number of px
         * @member {Number}
         * @default 12
         */
        fontSize: 12,

        /**
         * Font family for the title text.
         * @member {String} fontFamily
         * @default "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
         */
        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

        /**
         * Font color
         * @member {String} fontColor
         * @default '#888'
         */
        fontColor: '#888',

        /**
         * Font style
         * @member {String} fontStyle
         * @enum 'normal' | 'bold' | 'italic' | 'italic bold'
         * @default 'normal'
         */
        fontStyle: 'normal',

        /**
         * Padding between the title and the subtitle
         * @member {Number}
         * @default 4
         */
        paddingTop: 4,

        /**
         * Subtitle text to display
         * @member {String}
         * @default ''
         */
        text: '',
      }
    }

  ...
}

Examples

image image image image image

Building

npm install
npm run build

Built by Jered Masters, linkedin