Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Adding Chart Highlight Behaviors

Page of 168

Chart highlight behaviors enables you to highlight the markers or the series when the user hovers over them with their mouse. You can simply set highlight:true as a Series configuration property or you can explicitly define the behavior using the same style properties you would apply to a Ext.draw.Sprite object.

The following highlight definition, when applied to a pie series, results in a pie segment flying out 20 pixels from the center of the chart when the user mouses over it:

Pie chart with segment highlight effect
series: [{
 type: 'pie',
 angleField: 'data',
 showInLegend: true,
 highlight: {
  segment: { margin: 20 }
 },
 label: {
  field: 'name',
  display: 'rotate',
  contrast: true,
  font: '18px Arial'
 }
}]

In contrast, most developers simply use the default highlight behavior on column and bar charts that makes a subtle change to the opacity of a bar and adds a border when one is moused over:

Applying a simple highlight to a bar chart
series: [
 {
  type: 'bar',
  axis: 'bottom',
  highlight: true,
  label: {
   display: 'insideEnd',
   field: 'data',
   renderer: Ext.util.Format.numberRenderer('0'),
   orientation: 'horizontal',
   color: '#333',
   'text-anchor': 'middle'
  },
  xField: 'name',
  yField: 'data'
 }
]
Page of 168
comments powered by Disqus