chart_config_object_test.js

{
    chart: {
        type: 'line',
        //height: 400,
        ganame: 'googleanalyticsname',
        spacingBottom: 25,
        marginRight: 15,
        style: {
            fontFamily: "Helvetica, Arial, sans-serif"
        },
        events: {
            load: function() {
                $(".highcharts-legend-item path").attr('stroke-width', 3);
                // Set exporting size options from chart container size
                this.options.exporting.sourceWidth = $(this.container).width();
                this.options.exporting.sourceHeight = $(this.container).height();
            },
            redraw: function() {
                $(".highcharts-legend-item path").attr('stroke-width', 3);
                // Set exporting size options from chart container size
                this.options.exporting.sourceWidth = $(this.container).width();
                this.options.exporting.sourceHeight = $(this.container).height();
            },
            beforePrint: function() {
                this.exportSVGElements[0].box.hide();
                this.exportSVGElements[1].hide();
            },
            afterPrint: function() {
                this.exportSVGElements[0].box.show();
                this.exportSVGElements[1].show();
            }
        }
    },
    lang: {
        noData: 'Please select one or more chart series'
    },
    noData: {
        style: {
            fontFamily: "'HelveticaNeueLT-Light',Arial,sans-serif",
            fontSize: '13px',
            color: '#414b56',
            fontWeight: 'normal'
        }
    },
    title: {
        text: 'Median Consumer Price Index',
        align: 'left',
        margin: 5,
        style: {
            fontSize: '18px',
            fontWeight: 'normal',
            color: '#333333'
        }
    },
    credits: {
        text: 'Source: Bureau of Labor Statistics, Federal Reserve Bank of Cleveland',
        position: {
            align: 'left',
            x: 0,
            y: -5
        },
        style: {
            fontSize: '11px',
            cursor: 'default'
        }
    },
    legend: {
        verticalAlign: 'top',
        align: 'left',
        floating: false,
        layout: 'horizontal',
        margin: 20,
        x: 0,
        y: -5,
        itemStyle: {
            color: 'rgba(102,102,102,1)',
            fontSize: '14px',
            fontWeight: 'normal'
        },
        labelFormatter: function() {
            return this.options.legendname;
        }
    },
    tooltip: {
        useHTML: true,
        shared: false,
        valueDecimals: 1,
        formatter: function() {
            var chartOptions = this.series.chart.options;
            var seriesOptions = this.series.options;
            var tooltipDecimals = chartOptions.tooltip.valueDecimals;
            if (tooltipDecimals === undefined) {
                if (seriesOptions.tooltip.valueDecimals != undefined) {
                    tooltipDecimals = seriesOptions.tooltip.valueDecimals;
                } else {
                    tooltipDecimals = -1;
                }
            }
            var s = '<span style="font-size: 12px; font-weight: bold;">';
            s += Highcharts.dateFormat("%b %Y", new Date(this.x));
            s+= '</span><br/>';
            s += '<table>';
                s += '<tr><td style="color:';
                s += seriesOptions.color + ';';
                s += ' text-align: left;';
                s += ' padding: 0px px 0px 0px;';
                s += ' font-size: 12px;';
                s += ' font-weight: bold;';
                s += ' white-space: pre;';
                s += '">';
                s += seriesOptions.tooltipname;
                s += ':</td>';
                s += '<td style="text-align: right; font-size: 12px; font-weight: bold; white-space: pre;"> ';
                if (seriesOptions.tooltip.valuePrefix) {
                    s += seriesOptions.tooltip.valuePrefix;
                }
                s += Highcharts.numberFormat(this.y, tooltipDecimals, '.', ',');
                if (seriesOptions.tooltip.valueSuffix) {
                    s += seriesOptions.tooltip.valueSuffix;
                }
                s += '</td></tr>';
            s += '</table>';
            return s;
        }
    },
    plotOptions: {
        series: {
            animation: false,
            lineWidth: 3,
            states: {
                hover: {
                    lineWidthPlus: 0
                },
                inactive: {
                    opacity: 1
                }
            },
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        radiusPlus: 2,
                        lineWidthPlus: 1
                    }
                }
            },
            events: {
                legendItemClick: function() {
                    return false;
                    // <== returning false disables legend click action
                }
            },
            // hide: function () { ga('send', 'event', 'Highcharts', 'hideSeries', this.options.chart.ganame + ' (series: ' + this.name + ') | ' + document.title); },
            // show: function () { ga('send', 'event', 'Highcharts', 'showSeries', this.options.chart.ganame + ' (series: ' + this.name + ') | ' + document.title); }
        }
    },
    yAxis: {
        title: {
            text: 'Percent',
            style: {
                fontSize: '14px',
                whiteSpace: 'nowrap',
                color: '#333333',
                fontWeight: 'normal'
            }
        },
        labels: {
            format: '{value}',
            style: {
                fontSize: '12px',
                color: '#333333',
                fontWeight: 'normal'
            }
        },
        allowDecimals: true,
        lineColor: 'rgba(145,145,145,0)',
        lineWidth: 0,
        gridLineColor: 'rgba(225,225,225,1)',
        gridLineWidth: 1,
        minorGridLineColor: 'rgba(225,225,225,0)',
        tickColor: 'rgba(207,216,220,1)',
        tickWidth: 0,
        tickPosition: 'outside',
        tickLength: 0,
        minPadding: 0,
        maxPadding: 0,
        plotLines: [{
            value: 0,
            color: 'rgba(145,145,145,1)',
            width: 2
        }]
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: null
        },
        labels: {
            format: '{value:%Y}',
            overflow: false,
            rotation: 0,
            style: {
                fontSize: '12px',
                color: '#333333',
                fontWeight: 'normal'
            }
        },
        allowDecimals: true,
        lineColor: 'rgba(145,145,145,1)',
        lineWidth: 1,
        gridLineColor: 'rgba(225,225,225,0)',
        gridLineWidth: 0,
        minorGridLineColor: 'rgba(225,225,225,0)',
        tickColor: 'rgba(145,145,145,1)',
        tickWidth: 1,
        tickPosition: 'inside',
        tickLength: 7,
        minPadding: 0,
        crosshair: true,
        startOnTick: false,
        endOnTick: false,
        showFirstLabel: true
    },
    exporting: {
        filename: 'cleveland_fed_mediancpi',
        chartOptions: {
            credits: {
                enabled: true,
                text: 'Source: Bureau of Labor Statistics, Federal Reserve Bank of Cleveland            Exported on: ' + Highcharts.dateFormat('%A, %B %e, %Y', Date.now()),
                href: false,
                useHTML: true,
                style: {
                    fontSize: '9px',
                    whiteSpace: 'pre'
                }
            },
            chart: {
                events: null
            }
        },
        buttons: {
            contextButton: {
                menuItems: [{
                    textKey: 'downloadCSV',
                    onclick: function() {
                        this.downloadCSV();
                        // ga('send', 'event', 'Highcharts', 'downloadCSV', '(chart: ' + this.options.chart.ganame + ') | ' + document.title);
                    }
                }, {
                    textKey: 'downloadXLSX',
                    onclick: function() {
                        this.downloadXLSX();
                        // ga('send', 'event', 'Highcharts', 'downloadXLS', '(chart: ' + this.options.chart.ganame + ') | ' + document.title);
                    }
                }, {
                    textKey: 'downloadPNG',
                    onclick: function() {
                        this.exportChart({ type: 'image/png' });
                        // ga('send', 'event', 'Highcharts', 'downloadPNG', '(chart: ' + this.options.chart.ganame + ') | ' + document.title);
                    }
                }, {
                    textKey: 'printChart',
                    onclick: function() {
                        this.print();
                        // ga('send', 'event', 'Highcharts', 'print', '(chart: ' + this.options.chart.gaTitle + ') | ' + document.title);
                    }
                }]
            }
        },
        xlsx: {
            worksheet: {
                sheetName: 'Median CPI',
                autoFitColumns: true,
                categoryColumn: {
                    title: 'Month',
                    numberFormat: 'yyyy-mm'
                },
                headerStyle: {
                    font: {
                        color: '#FFFFFF',
                        bold: true
                    },
                    fill: {
                        color: '#414b56'
                    }
                }
            }
        }
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                chart: {
                    spacingLeft: 5
                },
                noData: {
                    style: {
                        fontSize: '13px',
                    }
                },
                title: {
                    //margin: 10,
                    style: {
                        fontSize: '14px'
                    }
                },
                legend: {
                    itemStyle: {
                        fontSize: '11px'
                    }
                },
                xAxis: {
                    labels: { style: { font: '10px Arial, sans-serif' } },
                },
                yAxis: {
                    labels: { style: { font: '10px Arial, sans-serif' } },
                    title: {
                        reserveSpace: false,
                        align: 'high',
                        offset: 0,
                        rotation: 0,
                        y: -10,
                        x: 50,
                        style: {
                            fontSize: '12px',
                            fontWeight: 'bold'
                        }
                    }
                },
                plotOptions: {
                    series: {
                        lineWidth: 2
                    }
                },
                exporting: {
                    buttons: {
                        contextButton: {
                            symbol: 'menu'
                        }
                    }
                }
            }
        }]
    }
}