Basic column

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<figure class="highcharts-figure">
<div id="timeline-chart" style="height: 400px"></div>
    <p class="highcharts-description">
        A basic column chart comparing emissions by pollutant.
        Oil and gas extraction has the overall highest amount of
        emissions, followed by manufacturing industries and mining.
        The chart is making use of the axis crosshair feature, to highlight
        years as they are hovered over.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

$(function() {
    var chart1 = new Highcharts.Chart({
        chart: {
            defaultSeriesType: "area",
            renderTo: "timeline-chart"
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            area: {
                //allowPointSelect: true,
                fillOpacity: 0.25
            },
            series: {
                lineWidth: 5,
                marker: {
                    radius: 6,
                    symbol: "circle"
                },
                point: {
                    events: {
                        click: function() {
                            var x = this.x,
                                selected = !this.selected,
                                index = this.series.index;
                            console.log(this)
                            this.select(selected, false);

                            $.each(this.series.chart.series, function(i, serie) {
                                if (serie.index !== index) {
                                    $(serie.data).each(function(j, point){
                                        if(x === point.x)
                                            point.select(selected, true);
                                    });
                                }
                            });
                        }
                    }
                },
                pointInterval: 365 * 24 * 3600 * 1000,
                pointStart: Date.UTC(1993, 0, 1),
                shadow: false
            }
        },
        series: [
            {
            color: "#264870",
            data: [
                2142224322,
                2053234695,
                2200115746,
                2174294505,
                2238798248,
                2379538916,
                2434009960,
                2615477197.30,
                2717142084,
                2745055917,
                1974710669,
                2988836914,
          ...