Click here to Skip to main content
12,996,367 members (70,689 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 4 Feb 2012

Highlight Data in jqplot Chart

, 4 Feb 2012
Rate this:
Please Sign up or sign in to vote.
How to highlight data in a jqplot chart.

The original:


Please download the sample code at the section JQueryElement demo download of Download JQueryElement, the directory is /plot/Default.aspx.

This article will explain in detail how to highlight data in Plot chart, the catalog is as follows:


Please view the Prepare section at Introduction To Basic Properties Of jqplot Chart.

Required Scripts

You need add the script that required by highlight, such as:

<script type="text/javascript" src="js/plugins/jqplot.highlighter.min.js">

If you use the ResourceLoader to load scripts, you need to configure the web.config and set the JQPlotHighlighter property of ResourceLoader to true, for example:


 <add key="je.jqplot.Highlighter.js" value="~/js/plugins/jqplot.highlighter.min.js"/>
<je:ResourceLoader ID="resource" runat="server" JQPlotHighlighter="true" />

More about the ResourceLoader, you can refer to Use ResourceLoader To Automatically Add Script And Style.


Set the Show property of HighlighterSetting to true, you will highlight the data which the mouse hover on:

<je:Plot ID="plot1" runat="server" IsVariable="true" Data="[[[1,1],[3,2],[4,4],[5,8]]]">
 <HighlighterSetting Show="true" />


The SizeAdjust property of HighlighterSetting represents the size of highlight:

<je:Plot ID="plot2" runat="server" 

           IsVariable="true" Data="[[[2,1],[3,2],[4,7],[5,8]]]">
 <HighlighterSetting Show="true" SizeAdjust="10" />


The ToolTipLocation property of HighlighterSetting represents the location of tooltip, ToolTipOffset property represents the offset distance of the tooltip, ToolTipFadeSpeed property represents the disappearing speed of tooltip:

<je:Plot ID="plot3" runat="server" IsVariable="true"

 <HighlighterSetting Show="true"




  FormatString="x: %.5P, y: %.5P" />

You can set the content of tooltip by FormatString property, by default the first value is the data of x axis, the second value is the y axis data.

If you set ToolTipAxes property to yx, the first value will be the data of y axis:

<je:Plot ID="plot4" runat="server" IsVariable="true"

 <HighlighterSetting Show="true"

  ToolTipAxes="yx" />

Bring To Front

The BringSeriesToFront property is set to true, the highlighted series will be placed on top:

<je:Plot ID="plot5" runat="server" IsVariable="true"

 <HighlighterSetting Show="true"

  BringSeriesToFront="true" />

Related Content


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170609.2 | Last Updated 4 Feb 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid