Highcharts Demo

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

@import "https://code.highcharts.com/css/highcharts.css";

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

.highcharts-point {
    stroke: white;
}

.highcharts-graph.zone-0 {
    stroke: #f7a35c;
}

.highcharts-area.zone-0 {
    fill: #f7a35c;
}

.highcharts-point.zone-0 {
    fill: #f7a35c;
}

.highcharts-graph.zone-1 {
    stroke: #7cb5ec;
}

.highcharts-area.zone-1 {
    fill: #7cb5ec;
}

.highcharts-point.zone-1 {
    fill: #7cb5ec;
}

.highcharts-graph.zone-2 {
    stroke: #90ed7d;
}

.highcharts-area.zone-2 {
    fill: #90ed7d;
}

.highcharts-point.zone-2 {
    fill: #90ed7d;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        styledMode: true
    },

    title: {
        text: 'Styled color zones'
    },

    yAxis: {
        min: -10
    },
    labels:{
      items:[{
      html:"text",
      style: {
    left: '100px',
    top: '100px'
}
      }]

},

    plotOptions: {
        series: {
            zones: [{
                value: 0,
                className: 'zone-0'
            }, {
                value: 10,
                className: 'zone-1'
            }, {
                className: 'zone-2'
            }],
            threshold: -10
        }
    },

    series: [{
        type: 'areaspline',
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5]
    }, {
        type: 'column',
        data: [1, 13, 2, -4, 6, 7, 5, 3, 2, -1, 2]
    }]
});