Date Range Chart

Test de graphique

by toubia95

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        
    window.chart = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container',
            type: 'columnrange',
            inverted: true
        },
        
        title: {
            text: 'Plages temporelles'
        },
        
        subtitle: {
            text: 'Période probable de naissance'
        },
    
        xAxis: {
            categories: ['Acte n°1', 'Acte n°2', 'Acte n°3', 'Acte n°4', 'Acte n°5']
        },
        
        yAxis: {
            title: {
                text: 'Période'
            }
        },
    
        tooltip: {
            valueSuffix: ''
        },
        
        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y;
                    }
                }
            }
        },
        
        legend: {
            enabled: false
        },
    
        series: [{
            name: 'Temperatures',
            data: [
                [1633, 1642],
                [1635, 1640],
                [1622, 1653],
                [1610, 1621],
                [1632, 1683]
            ]
        }]
    
    });
    
});