Line annotation on line and bar charts

Line annotation on line and bar charts

You can add line annotation to your charts using the shortcode parameter annotation with the following comma-separated list:

  1. annotation type: line
  2. line mode: vertical|horizontal
  3. position of line on axis
  4. line color
  5. line width
  6. label

Line chart

With line type chart, note the use of parameter x_scale_type=linear, so as the x scale is linear and the value set for annotation position is correctly located.

Simple line annotation

[gfchartsreports height="400px" type="line" include="3" x_scale_type=linear annotation="line,vertical,3,red,5,line annotation example"]

Multiple lines annotations

You can add multiple lines annotations separating them with a semicolon:

[gfchartsreports height="400px" type="line" include="3" x_scale_type=linear annotation="line,vertical,3,red,5,line annotation example;line,vertical,5,#f76d7491,3,another example;line,vertical,7,#6df7bed1,10,another example;line,vertical,8.6,blue,1,another example"]

Bar chart

With bar type chart, the x axis is by default category (do not use parameter x_scale_type=linear), to you may adjust the position of annotation to make it display at the right place on the axis.

Simple line annotation

[gfchartsreports height="400px" type="bar" include="3" annotation="line,vertical,3,red,5,line annotation example"]

Horizontal Bar chart

With bar type chart, the x axis is by default category (do not use parameter x_scale_type=linear), to you may adjust the position of annotation to make it display at the right place on the axis.

Simple line annotation

[gfchartsreports height="400px" type="horizontalBar" include="3" annotation="line,horizontal,5,red,5,line annotation example"]

About The Author