Gallery Back to Gallery

Line Chart with Crosshair Tooltips

​
Powered by ZingChart 
<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>
​

<body class="zc-body">
  ​
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
    // -----------------------------
    let chartData = [{
        text: 'Pricing',
        values: [149.2, 174.3, 187.7, 147.1, 129.6, 189.6, 230, 164.5, 171.7, 163.4, 194.5, 200.1, 193.4, 254.4, 287.8, 246, 199.9, 218.3, 244, 312.2, 284.5, 249.2, 305.2, 286.1, 347.7, 278, 240.3, 212.4, 237.1, 253.2, 186.1, 153.6, 168.5, 140.9, 86.9, 49.4, 24.7, 64.8, 114.4, 137.4],
        legendMarker: {
          type: 'circle',
          backgroundColor: '#007790',
          borderColor: '#69dbf1',
          borderWidth: '1px',
          shadow: false,
          size: '5px'
        },
        lineColor: '#007790',
        marker: {
          backgroundColor: '#007790',
          borderColor: '#69dbf1',
          borderWidth: '1px',
          shadow: false
        }
      },
      {
        text: 'Documentation',
        values: [714.6, 656.3, 660.6, 729.8, 731.6, 682.3, 654.6, 673.5, 700.6, 755.2, 817.8, 809.1, 815.2, 836.6, 897.3, 896.9, 866.5, 835.8, 797.9, 784.7, 802.8, 749.3, 722.1, 688.1, 730.4, 661.5, 609.7, 630.2, 633, 604.2, 558.1, 581.4, 511.5, 556.5, 542.1, 599.7, 664.8, 725.3, 694.2, 690.5],
        legendMarker: {
          type: 'circle',
          backgroundColor: '#009872',
          borderColor: '#69f2d0',
          borderWidth: '1px',
          shadow: false,
          size: '5px'
        },
        lineColor: '#009872',
        marker: {
          backgroundColor: '#009872',
          borderColor: '#69f2d0',
          borderWidth: '1px',
          shadow: false
        }
      },
      {
        text: 'Support',
        values: [536.9, 576.4, 639.3, 669.4, 708.7, 691.5, 681.7, 673, 701.8, 636.4, 637.8, 640.5, 653.1, 613.7, 583.4, 538, 506.7, 563.1, 541.4, 489.3, 434.7, 442.1, 482.3, 495.4, 556.1, 505.4, 463.8, 434.7, 377.4, 325.4, 351.7, 343.5, 333.2, 332, 378.9, 415.4, 385, 412.6, 445.9, 441.5],
        legendMarker: {
          type: 'circle',
          backgroundColor: '#da534d',
          borderColor: '#faa39f',
          borderWidth: '1px',
          shadow: false,
          size: '5px'
        },
        lineColor: '#da534d',
        marker: {
          backgroundColor: '#da534d',
          borderColor: '#faa39f',
          borderWidth: '1px',
          shadow: false
        }
      }
    ];

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'line',
      theme: 'classic',
      backgroundColor: '#003849',
      utc: true,
      title: {
        text: 'Webpage Analytics',
        backgroundColor: '#003849',
        fontColor: 'white',
        fontSize: '24px',
        height: '25px',
        y: '7px'
      },
      legend: {
        align: 'center',
        backgroundColor: 'none',
        borderWidth: '0px',
        item: {
          fontColor: '#f6f7f8',
          fontSize: '14px'
        },
        layout: 'float',
        offsetY: '35px',
        shadow: false,
        textAlign: 'middle'
      },
      plot: {
        hoverMarker: {
          type: 'circle',
          borderWidth: '1px',
          size: '4px'
        },
        lineWidth: '3px',
        marker: {
          type: 'circle',
          size: '3px'
        },
        shadow: false,
        tooltipText: '%t views: %v<br>%k'
      },
      plotarea: {
        margin: '20% 8% 14% 12%',
        backgroundColor: '#003849'
      },
      scaleX: {
        guide: {
          lineColor: '#f6f7f8'
        },
        item: {
          fontColor: '#f6f7f8'
        },
        label: {
          visible: false
        },
        lineColor: '#f6f7f8',
        minorTicks: 0,
        minValue: 1383292800000,
        shadow: false,
        step: 3600000,
        tick: {
          lineColor: '#f6f7f8'
        },
        transform: {
          type: 'date',
          all: '%D, %d %M<br />%h:%i %A',
          item: {
            visible: false
          }
        }
      },
      scaleY: {
        values: '0:1000:250',
        guide: {
          lineColor: '#f6f7f8',
          lineStyle: 'dashed'
        },
        item: {
          fontColor: '#f6f7f8'
        },
        label: {
          text: 'Page Views',
          fontColor: '#f6f7f8'
        },
        lineColor: '#f6f7f8',
        minorTicks: 0,
        shadow: false,
        thousandsSeparator: ',',
        tick: {
          lineColor: '#f6f7f8'
        }
      },
      crosshairX: {
        lineColor: '#f6f7f8',
        plotLabel: {
          padding: '10px',
          borderColor: '#f6f7f8',
          borderRadius: '5px',
          borderWidth: '1px',
          fontWeight: 'bold'
        },
        scaleLabel: {
          backgroundColor: '#f6f7f8',
          borderRadius: '5px',
          fontColor: '#00baf0'
        }
      },
      tooltip: {
        visible: false
      },
      series: chartData
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });
  </script>
</body>

</html>
<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  ​
  <body class="zc-body">
  ​
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>
// DEFINE DATA
// -----------------------------
let chartData = [
  {
    text: 'Pricing',
    values: [149.2, 174.3, 187.7, 147.1, 129.6, 189.6, 230, 164.5, 171.7, 163.4, 194.5, 200.1, 193.4, 254.4, 287.8, 246, 199.9, 218.3, 244, 312.2, 284.5, 249.2, 305.2, 286.1, 347.7, 278, 240.3, 212.4, 237.1, 253.2, 186.1, 153.6, 168.5, 140.9, 86.9, 49.4, 24.7, 64.8, 114.4, 137.4],
    legendMarker: {
      type: 'circle',
      backgroundColor: '#007790',
      borderColor: '#69dbf1',
      borderWidth: '1px',
      shadow: false,
      size: '5px'
    },
    lineColor: '#007790',
    marker: {
      backgroundColor: '#007790',
      borderColor: '#69dbf1',
      borderWidth: '1px',
      shadow: false
    }
  },
  {
    text: 'Documentation',
    values: [714.6, 656.3, 660.6, 729.8, 731.6, 682.3, 654.6, 673.5, 700.6, 755.2, 817.8, 809.1, 815.2, 836.6, 897.3, 896.9, 866.5, 835.8, 797.9, 784.7, 802.8, 749.3, 722.1, 688.1, 730.4, 661.5, 609.7, 630.2, 633, 604.2, 558.1, 581.4, 511.5, 556.5, 542.1, 599.7, 664.8, 725.3, 694.2, 690.5],
    legendMarker: {
      type: 'circle',
      backgroundColor: '#009872',
      borderColor: '#69f2d0',
      borderWidth: '1px',
      shadow: false,
      size: '5px'
    },
    lineColor: '#009872',
    marker: {
      backgroundColor: '#009872',
      borderColor: '#69f2d0',
      borderWidth: '1px',
      shadow: false
    }
  },
  {
    text: 'Support',
    values: [536.9, 576.4, 639.3, 669.4, 708.7, 691.5, 681.7, 673, 701.8, 636.4, 637.8, 640.5, 653.1, 613.7, 583.4, 538, 506.7, 563.1, 541.4, 489.3, 434.7, 442.1, 482.3, 495.4, 556.1, 505.4, 463.8, 434.7, 377.4, 325.4, 351.7, 343.5, 333.2, 332, 378.9, 415.4, 385, 412.6, 445.9, 441.5],
    legendMarker: {
      type: 'circle',
      backgroundColor: '#da534d',
      borderColor: '#faa39f',
      borderWidth: '1px',
      shadow: false,
      size: '5px'
    },
    lineColor: '#da534d',
    marker: {
      backgroundColor: '#da534d',
      borderColor: '#faa39f',
      borderWidth: '1px',
      shadow: false
    }
  }
];

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'line',
  theme: 'classic',
  backgroundColor: '#003849',
  utc: true,
  title: {
    text: 'Webpage Analytics',
    backgroundColor: '#003849',
    fontColor: 'white',
    fontSize: '24px',
    height: '25px',
    y: '7px'
  },
  legend: {
    align: 'center',
    backgroundColor: 'none',
    borderWidth: '0px',
    item: {
      fontColor: '#f6f7f8',
      fontSize: '14px'
    },
    layout: 'float',
    offsetY: '35px',
    shadow: false,
    textAlign: 'middle'
  },
  plot: {
    hoverMarker: {
      type: 'circle',
      borderWidth: '1px',
      size: '4px'
    },
    lineWidth: '3px',
    marker: {
      type: 'circle',
      size: '3px'
    },
    shadow: false,
    tooltipText: '%t views: %v<br>%k'
  },
  plotarea: {
    margin: '20% 8% 14% 12%',
    backgroundColor: '#003849'
  },
  scaleX: {
    guide: {
      lineColor: '#f6f7f8'
    },
    item: {
      fontColor: '#f6f7f8'
    },
    label: {
      visible: false
    },
    lineColor: '#f6f7f8',
    minorTicks: 0,
    minValue: 1383292800000,
    shadow: false,
    step: 3600000,
    tick: {
      lineColor: '#f6f7f8'
    },
    transform: {
      type: 'date',
      all: '%D, %d %M<br />%h:%i %A',
      item: {
        visible: false
      }
    }
  },
  scaleY: {
    values: '0:1000:250',
    guide: {
      lineColor: '#f6f7f8',
      lineStyle: 'dashed'
    },
    item: {
      fontColor: '#f6f7f8'
    },
    label: {
      text: 'Page Views',
      fontColor: '#f6f7f8'
    },
    lineColor: '#f6f7f8',
    minorTicks: 0,
    shadow: false,
    thousandsSeparator: ',',
    tick: {
      lineColor: '#f6f7f8'
    }
  },
  crosshairX: {
    lineColor: '#f6f7f8',
    plotLabel: {
      padding: '10px',
      borderColor: '#f6f7f8',
      borderRadius: '5px',
      borderWidth: '1px',
      fontWeight: 'bold'
    },
    scaleLabel: {
      backgroundColor: '#f6f7f8',
      borderRadius: '5px',
      fontColor: '#00baf0'
    }
  },
  tooltip: {
    visible: false
  },
  series: chartData
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig
});
.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
Time Series Line Chart with Toggle 239/281 Horizontal Funnel Chart with Styled Guides

Related Documentation: