Apache Echarts

options-echarts.js

https://echarts.apache.org/examples/en/editor.html?c=area-stack&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcs0ArllgDRobDBaQgGrrpgBOEA5uziwQOQRgcAW14UmsEMADOAqNAIAzItADGkGLAAUkqWQkBDFvqG7YAE2BC9LHGr0yAXjgCUySuJUwpYCdIAaCL5SANoADAC6ANzuTJ7Q3kEAmoE6wQCMUTHocQlxgtBgAMoQTgDqEGZgABaBjjgAdHk4BcVOYZni2V4-TS0lOAASOBxVPoh1jTD5Rf3pHZ05PgBuEDgA7q045ZU14_31K-ub7dGdsLg-AB6BoaedF7AAnjfRWbAQClo6AQA8sL0zMoVaqwABkoKCAQA1LAbGp6tc_gDNttqq5GGdYNdELc3gBfWA4LBSHDvT7afywGFwsD1NbAmowgCssAAfIhDht-qiqui3uhsbBOSiGbAALT_KbNQFbBl3cQEokktyYrGBGkI8WSgrSkU7WAAelgACYqbAABz1Jnyph4lBvD5faTJJFSvpOIYjMB81XPRDW_GE4mkjFnP2w2y054S5H9T3sUZatLGm3oO1vGxgIgsODBS56R7zNNiJgKYAsIT6MCCHhfQzGKSueCslX3HA-XAKMawXi8VPnduwr2BXv9x3aesmepmKv6ACS0DMOGx8BxPsxne7vDSTIApH3-UOE1vQgezgajYrg2S60YpzOwPPF8uEKutA_9ABxIwgGrg8yzt--i_u0AD89QkmwOAhBk4EfuBuDQOwIISmkzjruIF5MJuI7mnuZ6dFh6BsMeI47vu_ZXsqoZtl2I5MqEFGHiRiaILwp6URm7bZnAAAGAAkSAgJOUjTrO9RgMAAAywAqPouCFKwEBIZo_BmGKc4ACK8M4BKaIJwl3qJ0DGDgeLOD8UjCXA3iPLg8AAEQAnwfY6LIMAEPoABGUg0EQgiRGYEBWVg-iPAQXlYLJADWkT0jsBChCAlyRJuBCCZueKRCxYDpUgOVZV5wDVpYiWREVLBLrW5rJbAvlYBUGBGPEhnSuV5ZVWKRUlUIZUVZ1kn0BatX1Y1ADEoQAEJpAAgsa5qRKw-jxGWFYEEt8ShYImhigxu56HJWAqJoaShIx6GRA5rI_AaVnLayvE2niJboMJZhBUhBDBOaehpAAbOEL2wF5-gqNF7AsMAyhmAAwjQ5Z8BN01zeaogxP13Bw1Fta8Ejs3zWj4iCJcRRgHZ-Cth48M42NABi9MM4T9zKYMwzHgQaQ_W8VRs6MHNA-g8XVBzoQxM9MTLktMNSFIAAqksELxGMsGKRhBUQUgEAALMlkS8UD8lrGFUiFFUwBrHDOoFOtLBEDgQPStw3m4DbdsxFhTkwAoLMOa7OCUOLAozZcwUMDEUhm2sijySSQNkyAFO8HJgjsOWjxM-gRXQ4YjyfsB0fBkDH5fW825pLAM1EOwJqhMaxoZ0w26mpX1fGrX9cCz2aQAMwV1XNd1w36Dblrfet-3Q9dyyLcDx3pf_WPs-T9uADsi9t4Pnfbua68TzEgMxPoIdSFJ3lEmHZxlu6FPJp3njY4jTLGkyK9MiovBiwHJaPMHoeU3VkcC6xxiPHROSx5J2wbkfYKp8vLn3_ugK-MoObGjvtTR-z9X7vzFkDKQh0KasDdsWSgkFVia1gMEGINF0AmSEInWWhguBgEnqAvgDVoA4EnlIIQ1BhawAUDHe2bxi4UNCHoMRsAJESK1mdWR0i5FnT0DIhRSiFERE7uwnAilyYX0xELKo_NDysJ7DOCOOAzAfzOIHToUhHhCCKlgPg0AYCcLQQ_HsY1u5pC1q_AAopY20QNqGEFMgQYgpBO7GN4JorhPDioGP4YIzuIiwi_R8X9WRehn4qNgD3BimTYDd1CFrfJEiiklIKd3Y0FTFGwGUXIg-ZxNHaJdggpg-jtb4k7rY-xNA-AqAgCwFQuAuF2IcZsEWncsIR3NoUMZfTEmFzeD0hxAB5BQCgSS5Qoag3J6i3iGBwPoFpFNgldHcRwtYhIVBVEMGAUSENgJVAgCoeoUkWaGCAkFaUmgpHiN-noShqp0BnM6MADZWzEqdzOPfBGHiZoAE5fGhHpgE1U1jVSgvEOCzZ7ZDHAtiOgjxGyFBosxHaVU4RnBdLeLCmmWs_oIsmqiz-6BGmwGWhASs6h5BNTtiWOlJdxC4wUMUrWWt35A1xl4ryoQX4NxFWKiVCrPFpFlfKqVY0vLJm7jgLyKqzBa3NMaP6TIVUIrSCoFe-hXExFxivLWCKFDmm7iquS5o_qbztVqmcxoEX6BVX9HAK9QgOpVUyBlL9TyapUBKlQZhXWUHZZy7lchfH6BkJ9HsRIM2QBUKs_yTMU1VjkJpbMJaYAAFUQAPgpvkksxaeVlqMDykWijKDE1Jjo_-SDabGAgFgcKPYACyUxIItvsMtKQYpSGkqBkgiZuTUExEFR4p-L834BOsRDCouj0BpVyX9OOoACDmjETEHKHMj3o2KpJXqNcA4oCykAA

option = {
  title: null,
  tooltip: {
    trigger: 'item',
    // axisPointer: {
    //   type: 'line',
    //   axis: 'x',
    //   lineStyle: {
    //     color: 'red',
    //     width: 1
    //   },
    //   label: {
    //     show: false
    //   }
    // },
    position: function (pos, params, dom, rect, size) {
      const posX = pos[0];
      const posY = pos[1];
      const contentSizeWidth = size.contentSize[0];
      const contentSizeHeight = size.contentSize[1];
      const viewSizeWidth = size.viewSize[0];
      let x = 0;
      let y = 0;

      if (posX < contentSizeWidth && posX + rect.x < contentSizeWidth) {
        x = 0;
      } else if (posX + rect.width + 5 >= viewSizeWidth) {
        x = viewSizeWidth - contentSizeWidth;
      } else {
        x = rect.x - contentSizeWidth / 2 + 8.5;
      }

      if (posY < contentSizeHeight) {
        y = 5;
      } else {
        y = rect.y - contentSizeHeight - 12;
      }

      return [x, y];
    },
    formatter: (params) => {
      let left = '';
      let right = '';
      if (params.dataIndex === 0) {
        left = '15%';
        right = '0';
      } else if (params.dataIndex === (dataGraph && dataGraph[0]?.series[1]?.data?.length - 1)) {
        left = '85%';
        right = '15%';
      } else {
        left = '50%';
        right = '0';
      }
      return `${params.data.toLocaleString('id-ID')} (${params.name})<span style="content: '';position: absolute;display: block;width: 0px;left: ${left};right: ${right};bottom: 0;border: 8px solid transparent;border-bottom: 0;border-top: 8px solid #0B1A28;transform: translate(-50%, calc(100%));"></span>`;
    },
    padding: [8, 16],
    backgroundColor: '#0B1A28',
    borderColor: '#0B1A28',
    textStyle: {
      color: '#FFFFFF',
      lineHeight: 18,
      height: 1,
      width: 10
    },
    extraCssText: `border-radius: 4px;`,
    alwaysShowContent: true,
    enterable: true
    // "confine": true
  },
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    data: [
      '11 Aug 2022',
      '12 Aug 2022',
      '13 Aug 2022',
      '14 Aug 2022',
      '15 Aug 2022',
      '16 Aug 2022',
      '17 Aug 2022',
      '18 Aug 2022'
    ],
    axisLabel: {
      fontSize: 12,
      color: '#52575c'
    }
  },
  yAxis: {
    show: false,
    type: 'value',
    axisLabel: {
      fontSize: 12,
      color: '#52575c'
    },
    scale: true
  },
  series: [
    {
      name: 'Target',
      type: 'line',
      smooth: false,
      data: [0, 0, 0, 0, 4000000, 4000000, 4000000, 4000000],
      lineStyle: {
        width: 1,
        type: 'dashed'
      },
      symbol: 'none',
      color: '#31475E'
    },
    {
      name: null,
      type: 'line',
      smooth: false,
      data: [0, 1476000, 2500000, 1350000, 3045000, 3045000, 3245000, 4000000],
      lineStyle: {
        width: 4
      },
      symbol: 'circle',
      symbolSize: 10,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#A9E0FF'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
      color: '#469BFF'
    }
  ],
  animation: true,
  color: [
    '#f0444c',
    '#31b057',
    '#f0444c',
    '#31b057',
    '#b123eb',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],
  animationEasing: 'elasticOut',
  animationDurationUpdate: 500,
  animationDuration: 1000,
  textStyle: {
    fontFamily: 'Montserrat, sans-serif',
    fontSize: 12,
    color: '#52575c'
  },
  grid: {
    left: 16,
    top: 80,
    right: 16,
    bottom: 50
  }
};