JavaScript/jQuery Chart - Constant Lines

A constant line is a straight line that extends over the entire Chart and indicates an axis value. Constant lines are always perpendicular to the axis to which they belong.

DevExtreme HTML5 JavaScript Charts ConstantLines

To configure the constant lines, declare the constantLines array in the argumentAxis or valueAxis object. This array should contain objects, and each one of them configures a single constant line. A constant line demands at least the value property to be set.

JavaScript
  • $(function() {
  • $("#chartContainer").dxChart({
  • // ...
  • argumentAxis: {
  • constantLines: [
  • { value: 100 },
  • { value: 50 }
  • ]
  • },
  • valueAxis: {
  • constantLines: [
  • { value: 40 },
  • { value: 70 }
  • ]
  • }
  • });
  • });

If several constant lines should have a uniform style, you can specify it using one of the following objects.

Note that individual settings override axis-specific settings which, in turn, override common settings.

JavaScript
  • $(function() {
  • $("#chartContainer").dxChart({
  • // ...
  • argumentAxis: {
  • constantLines: [
  • // high priority
  • ],
  • constantLineStyle: {
  • // middle priority
  • }
  • },
  • valueAxis: {
  • constantLines: [
  • // high priority
  • ],
  • constantLineStyle: {
  • // middle priority
  • }
  • },
  • commonAxisSettings: {
  • constantLineStyle: {
  • // low priority
  • }
  • }
  • });
  • });

For information about all properties of the constant lines, visit the constantLines section of the API reference.

View Demo

See Also