Customized Line Area Chart with customized Tooltip – Apache ECharts

Here is an example with a demo to create a customized line area chart with gradient and customized x-axis labels with customized tooltips.

DEMO

See the Pen Line Area Chart – using Apache Charts by Puneet Sharma (@webdevpuneet) on CodePen.

CODE

HTML

<div id="lineAreaChart1" style="width: 100%;height:500px;"></div>

JS

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

const lineAreaChart = (selector, xAxisData, yAxisData) => {
  var myChart = echarts.init(document.getElementById(selector));
  option = {
      tooltip: {
        backgroundColor: 'rgba(255, 255, 255, 0.5)', // Transparent black background
        borderColor: '#ffffff',
        borderWidth: 3,
        borderRadius: 100,
        extraCssText: 'box-shadow: none;',
        textStyle: {
          // Tooltip text color
        },
        
        trigger: 'axis',
        
        formatter: function (params) {
          var tooltipContent = '<div>';
          tooltipContent += '<span style="font-weight:500;color:#000">' + new Date(params[0].axisValue).toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }) + '</span><br />';
    
          params.forEach(function (item) {
            tooltipContent += '<span>' + item.seriesName + ': $' + item.value + '</span><br />';
          });
    
          tooltipContent += '</div>';
    
          return tooltipContent;
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisLine: {
          show: false 
        },
        axisLabel: {
          color: '#696969',
          formatter: function (value) {
            // Format the date to display only month and year
            return new Date(value).toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            width: 1.25, 
            color: '#E2E2E2'
          }
        },
        axisLine: {
          show: true, 
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.75)',
            width: 3
          }
        },
        axisLabel: {
          color: '#696969'
        }
      },
      series: [
        {
          name: 'Amount',
          data: yAxisData,
          type: 'line',
          showSymbol: false,
          symbolSize: 9,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FFA334' },
              { offset: 1, color: 'rgba(255, 255, 255, 0.00)' }
            ]),
          },
          itemStyle: {
            color: '#FFA334'
          },
        }
      ]
    };

    myChart.setOption(option);

}


window.onload=function(){
      
      var dates = [
        '2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07',
        '2022-02-01', '2022-02-02', '2022-02-03', '2022-02-04', '2022-02-05', '2022-02-06', '2022-02-07',
        '2022-03-01', '2022-03-02', '2022-03-03', '2022-03-04', '2022-03-05', '2022-03-06', '2022-03-07',
        '2022-04-01', '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06', '2022-04-07',
        '2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05', '2022-05-06', '2022-05-07',
        '2022-06-01', '2022-06-02', '2022-06-03', '2022-06-04', '2022-06-05', '2022-06-06', '2022-06-07',
      ];

      var values = [
        820, 932, 901, 934, 1290, 1330, 1320,
        1200, 1150, 1120, 1100, 1050, 1000, 980,
        900, 870, 850, 820, 800, 780, 750,
        700, 680, 660, 640, 620, 600, 580,
        550, 530, 510, 490, 470, 450, 430,
        410, 390, 370, 350, 330, 310, 290,
      ];

      lineAreaChart(
        'lineAreaChart1',  
        dates,
        values
      );
    }