JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

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

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

JavaScript

Highcharts.chart('container', 
{
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true
      }
    }
  },
  "xAxis": {
    "left": "50%",
    "categories": [
      "FUR-BO-10000112",
      "FUR-BO-10000330",
      "FUR-BO-10000362",
      "FUR-BO-10000468",
      "FUR-BO-10000711"
    ],
    "title": {
      "enabled": false
    },
  },
  "yAxis": [
    {
      "left": 0, // Data labels comes back if i comment out this
      "width": "45%",
      "reversed": true // Data labels comes back if i comment out this
    },
    {
      "left": "55%",
      "width": "45%"
    }
  ],
  "series": [
    {
      "dataLabels": {
        "inside": false
      },
      "yAxis": 0,
      "data": [
        {
          "name": "FUR-BO-10000112",
          "y": 825.174
        },
        {
          "name": "FUR-BO-10000330",
          "y": 1064.624
        },
        {
          "name": "FUR-BO-10000362", // If i remove last three data points in this series, datalabel is inside of the column, even with dataLabels.inside: false
          "y": 2154.348
        },
        {
          "name": "FUR-BO-10000468",
          "y": 723.842
        },
        {
          "name": "FUR-BO-10000711",
          "y": 851.76
        }
      ],
      "name": "Sales",
      "align": "left",
    },
    {
      "originalName": "Quantity",
      "yAxis": 1,
      "data": [
        {
          "name": "FUR-BO-10000112",
          "y": 9
        },
        {
          "name": "FUR-BO-10000330",
          "y": 10
        },
        {
          "name": "FUR-BO-10000362",
          "y": 14
        },
        {
          "name": "FUR-BO-10000468",
          "y": 21
        },
        {
          "name": "FUR-BO-10000711",
          "y": 12
        }
      ],
      "name": "Quantity",
      "align": "right",
      "zIndex": 1
    },
    {
      "dataLabels": {
        "inside": false
      },
      "yAxis": 1,
      "data": [
        {
          "name": "FUR-BO-10000112",
         ...