Basic line

author(s): Torstein Hønsi

by Sascha

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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.
    </p>
</figure>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "column",
  },

  "plotOptions": {
    "series": {
      "fillOpacity": 0.4,
      "pointPadding": 0,
      "groupPadding": 0.05,
      "stacking": "normal",

      dataLabels: {
        enabled: true,
        useHTML: true,
         style: {                
                    textOverflow: 'ellipsis',
                    fontWeight: '300',
                    fontSize: '0.675rem',                    
                }
      }

    },

  },


  "xAxis": {
    "categories": [
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10"
    ],
  },
  "yAxis": [{
    "plotLines": [{
      "value": 3744,
      "zIndex": 4,
      "width": 1,
      "color": "rgba(0, 0, 0, 1)",
    }],
  }, ],
  "series": [{
      "data": [
        2784,
        2780,
        2282,
        3449,
        3580,
        3894,
        3751,
        2792,
        3898,
        2707
      ],
      "color": "rgba(70, 170, 255, 0.6980392156862745)",
      "dataLabels": {
        "enabled": true
      }
    },
    {
      "data": [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 1298
      ],
      "color": "rgba(191, 191, 191, 0.6980392156862745)",
    }
  ],

});