apex chart legend tooltip

custom legend tooltip

by sqiudward

HTML

<div id="chart"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>

CSS

.apexcharts-legend-default-overflow {
  overflow: unset !important;
};

JavaScript

var chartData = [
  {
    "name": "Communication:",
    "description": " Exchanging thoughts and information through interaction  Reading, writing, and using language to gather information and communicate",
    "data": [
      [
        {
          "x": "2020-07-08",
          "y": 1,
          "lessonName": "Lesson 1"
        }
      ],
      [
        {
          "x": "2020-07-13",
          "y": 4,
          "lessonName": "Lesson 2"
        }
      ]
    ]
  },
  {
    "name": "Criterion A",
    "description": "Analysing",
    "data": [
      [
        {
          "x": "2020-07-08",
          "y": 6,
          "lessonName": "Lesson 1"
        }
      ]
    ]
  },
  {
    "name": "Criterion B",
    "description": "Organising",
    "data": [
      [
        {
          "x": "2020-07-08",
          "y": 2,
          "lessonName": "Lesson 1"
        }
      ]
    ]
  },
  {
    "name": "Criterion C",
    "description": "Producing text",
    "data": [
      [
        {
          "x": "2020-07-13",
          "y": 9,
          "lessonName": "Lesson 2"
        }
      ]
    ]
  },
  {
    "name": "Criterion D",
    "description": "Using language",
    "data": [
      [
        {
          "x": "2020-07-13",
          "y": 9,
          "lessonName": "Lesson 2"
        }
      ]
    ]
  },
  {
    "name": "Hard working:",
    "description": "able to study all chapters in short time.",
    "data": [
      [
        {
          "x": "2020-07-13",
          "y": 1,
          "lessonName": "Lesson 2"
        }
      ]
    ]
  },
  {
    "name": "Research:",
    "description": "Information Literacy Skills: Finding, interpreting, judging, and creating information  Media Literacy Skills: Interacting with media to use and create ideas and information",
    "data": [
      [
        {
          "x": "2020-07-08",
          "y": 1,
          "lessonName": "Lesson 1"
        }
      ]
    ]
  },
  {
    "name": "Self discipline:",
    "description": "able to study all chapters in...