Highcharts Demo

author(s): Torstein Hønsi

by ninachroscicka

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.chart('container', {
chart: {
  plotAreaWidth: 300,
  plotAreaHeight: 200
},
    title: {
        text: ' '
    },

    subtitle: {
        text: ' '
    },
    
    xAxis :{
    lineColor:'transparent',
    tickLength:0  ,
    categories: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj','Czerwiec','Lipiec','Sierpień']
    }, 

    yAxis: {
        title: {
            text: ' '
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },


    series: [{
        name: 'Wszystkie',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        color : "#808080",
        marker:{
        symbol: 'semi-circle',
        radius: 5,
        fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: null 
        }
    },
    {
        name: 'Pozytywne',
        data: [33934, 42503, 47177, 59658, 87031, 109931, 127133, 144175],
        color: '#67d4c4',
        marker:{
        symbol: 'semi-circle',
        radius: 5,
        fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: null 
        }
    },
    {
        name: 'Negatywne',
        data: [23934, 32503, 37177, 49658, 77031, 999931, 117133, 124175],
        color: '#990000',
        marker:{
        symbol: 'semi-circle',
        radius: 5,
        fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: null 
        }
        
    }
    
    ],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});