Missouri State University Pattern Library

Chart: Line

Documentation

Known bugs

If using this pattern as-is in standalone applications,Highcharts will return a console error due to multiple instances of the scripts trying to load.

There is a temporary fix in the Web Press instance that should allow the use of the chart pattern without error.

The pattern should still work outside of Web Press, albeit with errors. We are working on a solution that more effetively and efficently handles the loading of the scripts as-needed outside of Web Press.

The pattern will be marked “Under review” until a fix is applied.

Options

Anything within the double braces {{ ... }} is a variable to be set by the user. That includes the following list:

  • chartId
    • Auto generated from page ID
  • chart.type
    • Dropdown
      • Line
      • Bar
      • Stacked bar
      • Column
      • Stacked column
      • Pie
    • Default: Line
  • chart.description
    • Text area (plain text)
  • chart.className
    • Text input
  • title.text
    • Text input
  • subtitle.text
    • Text area (HTML; may need to have links)
  • xAxis.title.text
    • Text input
  • xAxis.categories
    • Text input?
    • Needs to output to an array
  • xAxis.tickAmount
    • Text input
    • Default: 4
  • xAxis.reversed
    • Radio/checkbox
    • Default: false
  • yAxis.title.text
    • Text input
  • yAxis.categories
    • Text input?
    • Needs to output to an array
  • yAxis.tickAmount
    • Text input
    • Default: 4
  • yAxis.reversed
    • Radio/checkbox
    • Default: false
  • plotOptions.series.dataLabels.enabled
    • Radio/checkbox
    • Default: true
  • plotOptions.series.dataLabels.format
    • Text input
    • Default: 0
  • plotOptions.series.marker.enabled
    • Radio/checkbox
    • Default: true
  • plotOptions.series.stacking
    • Set based on chart type being a stacked variant
  • legend.enabled
    • Radio/checkbox
    • Default: true
  • series
    • Connected items?
    • Output as an array
    • Each item must have:
      • series.name
        • Text input
      • series.data
        • Text input?
        • Output as array
  • tooltip.valueDecimals
    • Text input
    • Default: null
  • tooltip.valuePrefix
    • Text input
    • Default: null
  • tooltop.valueSuffix
    • Text input
    • Default: null
  • custom
    • Text area
    • Needs to be able to render out JSON-formatted code
    • Web strategy and development only
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/7.1/highcharts.js"></script>
<script src="http://code.highcharts.com/7.1/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/7.1/modules/exporting.js"></script>
<script src="https://code.highcharts.com/7.1/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/7.1/modules/export-data.js"></script>
<script>
    function addSlashes(str) {
        return (str + '').replace(/&#x27;/g, "'").replace(/&#x22;/g, '"');
    }
    $(function() {
        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });
    });
    $(function() {
        var myChart = Highcharts.chart('100', {
            chart: {
                styledMode: true,
                type: 'line',
                colorCount: '7',
                description: addSlashes('Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla fugit unde consequuntur expedita nobis iure ad? Repellat magnam provident amet, deleniti corrupti, voluptates nihil a possimus facere inventore illum.'),
            },
            title: {
                text: addSlashes('Lorem ipsum dolor sit amet consectetur'),
                align: 'left'
            },
            subtitle: {
                text: addSlashes('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, pariatur.'),
                align: 'left'
            },
            xAxis: {
                title: {
                    text: addSlashes('Categories')
                },
                categories: ['Alpha', 'Beta', 'Gamma', 'Delta', ],
            },
            yAxis: {
                title: {
                    text: addSlashes('Values')
                },
                tickAmount: '4',
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: 'true',
                        format: '${point.y:,.0f}'
                    },
                    marker: {
                        enabled: 'true',
                        symbol: 'circle'
                    },
                },
                pie: {
                    showInLegend: true
                }
            },
            legend: {
                enabled: true
            },
            series: [{
                    name: 'Series 1',
                    data: [100, 300, 200, 400],
                },
                {
                    name: 'Series 2',
                    data: [250, 150, 50, 550],
                },
                {
                    name: 'Series 3',
                    data: [200, 700, 100, 80],
                },
            ],
            tooltip: {
                valueDecimals: '0',
                valuePrefix: '$',
                valueSuffix: '',
            },
            exporting: {
                filename: 'chart-100',
                sourceWidth: 700,
                sourceHeight: 394,
                scale: 4,
                buttons: {
                    contextButton: {
                        menuItems: [
                            'viewData',
                            'printChart',
                            'separator',
                            'downloadPNG',
                            'downloadJPEG',
                            'downloadSVG',
                            'separator',
                            'downloadCSV',
                            'downloadXLS'
                        ]
                    }
                }
            },
        });
    });
</script>
<article class="ContentBlock chart">
    <figure>
        <div id="100" style="width:100%; height:auto"></div>
        <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem nemo ratione.</figcaption>
    </figure>
</article>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/7.1/highcharts.js"></script>
<script src="http://code.highcharts.com/7.1/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/7.1/modules/exporting.js"></script>
<script src="https://code.highcharts.com/7.1/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/7.1/modules/export-data.js"></script>
{{#if modules}}
  {{#each modules}}
    {{{this}}}
  {{/each}}
{{/if}}
<script>

  function addSlashes(str) {
    return (str + '').replace(/&#x27;/g, "'").replace(/&#x22;/g, '"');
  }
  $(function () {
    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
  });
  $(function () {
    var myChart = Highcharts.chart('{{chartId}}', {
      chart: {
        styledMode: true,
        type: '{{chart.type}}',
        colorCount: '7',
        {{#if chart.description}}
        description: addSlashes('{{chart.description}}'),
        {{/if}}
        {{#if chart.className}}
        className: '{{chart.className}}',
        {{/if}}
      },
      title: {
        text: addSlashes('{{title.text}}'),
        align: 'left'
      },
      {{#if subtitle}}
      subtitle: {
        text: addSlashes('{{subtitle.text}}'),
        align: 'left'
      },
      {{/if}}
      xAxis: {
        {{#if xAxis.title}}
          title: {
            text: addSlashes('{{xAxis.title.text}}')
          },
        {{/if}}
        {{#if xAxis.categories}}
          categories: [{{#each xAxis.categories}}'{{this}}',{{/each}}],
        {{/if}}
        {{#if xAxis.reversed}}
          reversed: '{{xAxis.reversed}}'
        {{/if}}
      },
      yAxis: {
        {{#if yAxis.title}}
          title: {
            text: addSlashes('{{yAxis.title.text}}')
          },
        {{/if}}
        {{#if yAxis.categories}}
          categories: [{{#each yAxis.categories}}'{{this}}',{{/each}}],
        {{/if}}
        {{#if yAxis.tickAmount}}
          tickAmount: '{{yAxis.tickAmount}}',
        {{/if}}
        {{#if yAxis.reversed}}
          reversed: '{{yAxis.reversed}}'
        {{/if}}
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: '{{plotOptions.series.dataLabels.enabled}}',
            format: '{{plotOptions.series.dataLabels.prefix}}{point.y:,.{{plotOptions.series.dataLabels.decimalPrecision}}f}{{plotOptions.series.dataLabels.suffix}}'
          },
          marker: {
            enabled: '{{plotOptions.series.marker.enabled}}',
            symbol: 'circle'
          },
          {{#if plotOptions.series.stacking}}
            stacking: '{{plotOptions.series.stacking}}',
          {{/if}}
        },
        pie: {
          showInLegend: true
        }
      },
      legend: {
        {{#if legend.reversed}}
        reversed: {{legend.reversed}},
        {{/if}}
        enabled: {{legend.enabled}}
      },
      series: [
        {{#each series}}
        {
          name: '{{name}}',
          data: [{{{data}}}],
        },
        {{/each}}
      ],      
        tooltip: {
            valueDecimals: '{{plotOptions.series.dataLabels.decimalPrecision}}',
            valuePrefix: '{{plotOptions.series.dataLabels.prefix}}',
            valueSuffix: '{{plotOptions.series.dataLabels.suffix}}',
        },
      exporting: {
        filename: 'chart-{{chartId}}',
        sourceWidth: 700,
        sourceHeight: 394,
        scale: 4,
        buttons: {
          contextButton: {
            menuItems: [
              'viewData',
              'printChart',
              'separator',
              'downloadPNG',
              'downloadJPEG',
              'downloadSVG',
              'separator',
              'downloadCSV',
              'downloadXLS'
            ]
          }
        }
      },
      {{#if custom}}
        {{{custom}}}
      {{/if}}
  });
});

</script>
<article class="ContentBlock chart">
  <figure>
    <div id="{{chartId}}" style="width:100%; height:auto"></div>
    {{#if caption}}
      <figcaption>{{{caption}}}</figcaption>
    {{/if}}
  </figure>
</article>
 
{
  "chartId": 100,
  "className": null,
  "modules": null,
  "caption": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem nemo ratione.",
  "chart": {
    "type": "line",
    "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate nulla fugit unde consequuntur expedita nobis iure ad? Repellat magnam provident amet, deleniti corrupti, voluptates nihil a possimus facere inventore illum."
  },
  "title": {
    "text": "Lorem ipsum dolor sit amet consectetur"
  },
  "subtitle": {
    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, pariatur."
  },
  "xAxis": {
    "title": {
      "text": "Categories"
    },
    "categories": [
      "Alpha",
      "Beta",
      "Gamma",
      "Delta"
    ],
    "reversed": false
  },
  "yAxis": {
    "title": {
      "text": "Values"
    },
    "tickAmount": 4,
    "reversed": false
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true,
        "prefix": "$",
        "decimalPrecision": "0",
        "suffix": null
      },
      "marker": {
        "enabled": true,
        "symbol": "circle"
      },
      "stacking": false
    }
  },
  "legend": {
    "enabled": true
  },
  "series": [
    {
      "name": "Series 1",
      "data": [
        100,
        300,
        200,
        400
      ]
    },
    {
      "name": "Series 2",
      "data": [
        250,
        150,
        50,
        550
      ]
    },
    {
      "name": "Series 3",
      "data": [
        200,
        700,
        100,
        80
      ]
    }
  ]
}