Параметры конфигурации диаграммы

Типы диаграмм

Параметры конфигурации диаграммы аннотаций

Имя
цвета

Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: colors:['red','#004411'] .

Тип: Массив строк.
По умолчанию: цвета по умолчанию
DisplayRangeSelector

Показывать ли область выбора диапазона масштабирования (область внизу диаграммы), где false означает «нет».

Контур в селекторе масштабирования представляет собой версию первой серии диаграммы в логарифмическом масштабе, масштабированную в соответствии с высотой селектора масштабирования.

Тип: boolean
По умолчанию: true
дисплейZoomButtons

Показывать ли кнопки масштабирования («1d 5d 1m» и т. д.), где false означает «нет».

Тип: boolean
По умолчанию: true
Макс

Максимальное значение, отображаемое по оси Y. Если максимальная точка данных превышает это значение, этот параметр игнорируется, и диаграмма корректируется так, чтобы отображать следующую крупную отметку выше максимальной точки данных. Это имеет приоритет над максимумом оси Y, определяемым scaleType .

Это похоже на maxValue в основных диаграммах.

Тип: number
По умолчанию: автоматический
мин

Минимальное значение для отображения по оси Y. Если минимальная точка данных меньше этого значения, этот параметр игнорируется, и диаграмма корректируется так, чтобы отображать следующую крупную отметку ниже минимальной точки данных. Это имеет приоритет над минимумом оси Y, определяемым scaleType .

Это похоже на minValue в основных диаграммах.

Тип: number
По умолчанию: автоматический

Параметры конфигурации диаграммы с областями

Имя
площадьНепрозрачность

Непрозрачность по умолчанию цветной области в серии диаграмм с областями, где 0.0 — полностью прозрачная, а 1.0 — полностью непрозрачная. Чтобы указать непрозрачность для отдельной серии, установите значение areaOpacity в свойстве series .

Тип: number , 0.0- 1.0
По умолчанию: 0.3
фонЦвет

Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: 'red' или '#00cc00' , либо объект со следующими свойствами.

Тип: string или object
По умолчанию: 'white'
фонЦвет.заливка

Цвет заливки диаграммы в виде цветовой строки HTML.

Тип: string
По умолчанию: 'white'
область диаграммы

Объект с элементами для настройки размещения и размера области диаграммы (где рисуется сама диаграмма, исключая оси и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: object
По умолчанию: null
chartArea.backgroundColor
Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc' ), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
  • stroke : цвет, представленный в виде шестнадцатеричной строки или английского названия цвета.
  • strokeWidth : Если предусмотрено, рисует границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: string или object
По умолчанию: 'white'
диаграммаArea.height

Высота области диаграммы.

Тип: number или string
По умолчанию: авто
диаграммаArea.left

Насколько далеко рисовать диаграмму от левой границы.

Тип: number или string
По умолчанию: авто
диаграммаArea.top

На каком расстоянии рисовать диаграмму от верхней границы.

Тип: number или string
По умолчанию: авто
ChartArea.width

Ширина области диаграммы.

Тип: number или string
По умолчанию: авто
цвета

Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: colors:['red','#004411'] .

Тип: Массив строк.
По умолчанию: цвета по умолчанию
ось

Объект с элементами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Тип: object
По умолчанию: null
hAxis.direction

Направление роста значений по горизонтальной оси. Укажите -1 , чтобы изменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
hAxis.gridlines

Объект со свойствами для настройки линий сетки на горизонтальной оси. Обратите внимание, что линии сетки по горизонтальной оси рисуются вертикально. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Эта опция поддерживается только для continuous оси.

Тип: object
По умолчанию: null
hAxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: '#CCC'
hAxis.gridlines.count

Примерное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы рисовать только одну линию сетки, или 0 , чтобы линии сетки не отображались. Укажите -1 (значение по умолчанию), чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
hAxis.logScale

Свойство hAxis , которое преобразует горизонтальную ось в логарифмический масштаб (требуется, чтобы все значения были положительными). Установите значение true для «да».

Эта опция поддерживается только для continuous оси.

Тип: boolean
По умолчанию: false
hAxis.maxValue

Перемещает максимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет вправо. Игнорируется, если для этого параметра установлено значение меньше максимального значения x данных. hAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматический
hAxis.minorGridlines

Объект с элементами для настройки второстепенных линий сетки на горизонтальной оси, аналогично параметру hAxis.gridlines .

Эта опция поддерживается только для continuous оси.

Тип: object
По умолчанию: null
hAxis.minorGridlines.color

Цвет второстепенных горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: сочетание цветов линии сетки и фона.
hAxis.minorGridlines.count

Опция minorGridlines.count по большей части устарела, за исключением отключения второстепенных линий сетки путем установки счетчика равным 0. Количество второстепенных линий сетки теперь полностью зависит от интервала между основными линиями сетки (см. hAxis.gridlines.interval ) и минимально необходимого пространства (см. hAxis.minorGridlines.minSpacing ).

Тип: number
По умолчанию: 1
hAxis.minValue

Перемещает минимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет левое положение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение x данных. hAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: автоматический
hAxis.textPosition

Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
hAxis.textStyle

Объект, определяющий стиль текста по горизонтальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

Свойство hAxis , определяющее заголовок горизонтальной оси.

Тип: string
По умолчанию: null
hAxis.titleTextStyle

Объект, определяющий стиль текста заголовка по горизонтальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Указывает диапазон обрезки горизонтальной оси.

Тип: object
По умолчанию: null
hAxis.viewWindow.max

Максимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение 'pretty' или 'maximized' .

Тип: number
По умолчанию: авто
hAxis.viewWindow.min

Минимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение 'pretty' или 'maximized' .

Тип: number
По умолчанию: авто
высота

Высота диаграммы в пикселях.

Тип: number
По умолчанию: высота содержащего элемента.
интерполироватьNulls

Стоит ли угадывать стоимость недостающих очков. Если true , он угадает значение любых недостающих данных на основе соседних точек. Если false , в неизвестной точке останется разрыв строки.

Это не поддерживается диаграммами с областями с параметром isStacked: true/'percent'/'relative'/'absolute' .

Тип: boolean
По умолчанию: false
isStacked

Если установлено значение true , элементы для всех серий складываются в каждое значение домена. Примечание. В диаграммах «Столбец» , «Область » и «Ступенчатая область» Google Charts меняет порядок элементов легенды на обратный, чтобы лучше соответствовать расположению элементов серии (например, серия 0 будет самым нижним элементом легенды). Это не относится к гистограммам .

Параметр isStacked также поддерживает 100%-ное стекирование, при котором стеки элементов в каждом значении домена масштабируются до 100%.

Параметры isStacked :

  • false — элементы не будут складываться. Это опция по умолчанию.
  • true — объединяет элементы для всех серий в каждом значении домена.
  • 'percent' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 100 %, при этом значение каждого элемента рассчитывается как процент, равный 100 %.
  • 'relative' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 1, при этом значение каждого элемента рассчитывается как дробь от 1.
  • 'absolute' — работает так же, как isStacked: true .

При 100% суммировании расчетное значение для каждого элемента появится во всплывающей подсказке после его фактического значения.

Целевая ось по умолчанию будет отображать значения деления на основе относительной шкалы 0–1 в виде долей от 1 для 'relative' и 0–100 % для 'percent' ( Примечание: при использовании параметра 'percent' значения оси/тикинга отображаются в процентах, однако фактические значения представляют собой относительные значения шкалы 0–1. Это связано с тем, что деления процентной оси являются результатом применения формата «#.##%» к относительным значениям шкалы 0–1. с использованием isStacked: 'percent' , обязательно указывайте все деления/линии сетки, используя относительные значения шкалы 0–1). Вы можете настроить значения линий сетки/отметок и форматирование, используя соответствующие параметры hAxis/vAxis .

100-процентное стекирование поддерживает только значения данных типа number и должно иметь нулевую базовую линию.

Тип: boolean / string
По умолчанию: false
легенда

Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: object
По умолчанию: null
легенда.позиция

Позиция легенды. Может быть одним из следующих:

  • 'bottom' — под графиком.
  • 'left' — слева от диаграммы, при условии, что с левой осью не связана никакая series . Поэтому, если вам нужна легенда слева, используйте опцию targetAxisIndex: 1 .
  • 'in' — внутри диаграммы, в верхнем левом углу.
  • 'none' — легенда не отображается.
  • 'right' - Справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - Над графиком.
Тип: string
По умолчанию: 'right'
LegendTextStyle

Объект, определяющий стиль текста легенды. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ширина линии

Ширина линии данных в пикселях. Используйте ноль, чтобы скрыть все линии и показать только точки. Вы можете переопределить значения для отдельных серий, используя свойство series .

Тип: number
По умолчанию: 2
точкаФорма

Форма отдельных элементов данных: 'circle' , 'triangle' , 'square' , 'diamond' , 'star' или 'polygon' . Примеры см. в документации по точкам .

Тип: string
По умолчанию: 'circle'
размер точки

Диаметр отображаемых точек в пикселях. Используйте ноль, чтобы скрыть все точки. Вы можете переопределить значения для отдельных серий, используя свойство series .

Тип: number
По умолчанию: 0
обратныеКатегории

Если установлено значение true , серия рисуется справа налево. По умолчанию рисуется слева направо.

Эта опция поддерживается только для discrete major оси.

Тип: boolean
По умолчанию: false
ряд

Массив объектов, каждый из которых описывает формат соответствующей серии на диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {} . Если серия или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:

  • annotations — объект, который будет применен к аннотациям этой серии. Это можно использовать, например, для управления textStyle для серии:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Ознакомьтесь с различными вариантами annotations , чтобы получить более полный список того, что можно настроить.

  • areaOpacity — переопределяет глобальную areaOpacity для этой серии.
  • color — цвет, используемый для этой серии. Укажите допустимую цветовую строку HTML.
  • labelInLegend — описание ряда, которое будет отображаться в легенде диаграммы.
  • lineDashStyle — переопределяет глобальное значение lineDashStyle для этой серии.
  • lineWidth — переопределяет глобальное значение lineWidth для этой серии.
  • pointShape — переопределяет глобальное значение pointShape для этой серии.
  • pointSize — переопределяет глобальное значение pointSize для этой серии.
  • pointsVisible — переопределяет глобальное значение pointsVisible для этой серии.
  • targetAxisIndex — какой оси назначить эту серию, где 0 — ось по умолчанию, а 1 — противоположная ось. Значение по умолчанию — 0 ; установите значение 1 чтобы определить диаграмму, на которой разные ряды отображаются по разным осям. По крайней мере одна серия должна быть отнесена к оси по умолчанию. Вы можете определить разный масштаб для разных осей.
  • visibleInLegendboolean значение, где true означает, что серия должна иметь запись легенды, а false означает, что ее не должно быть. По умолчанию true .

Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, в котором каждый дочерний элемент имеет числовой ключ, указывающий, к какой серии он применяется. Например, следующие два объявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертую — красной и отсутствующей в легенде:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Тип: Массив объектов или объект со вложенными объектами.
По умолчанию: {}
субтитры

Текст, который будет отображаться под заголовком диаграммы.

Тип: string
По умолчанию: без названия
стиль текста субтитров

Объект, определяющий стиль текста заголовка.

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

Тема — это набор предопределенных значений параметров, которые вместе обеспечивают достижение определенного поведения диаграммы или визуального эффекта. На данный момент доступна только одна тема:

  • 'maximized' — увеличивает область диаграммы и рисует легенду и все метки внутри области диаграммы.
Тип: string
По умолчанию: null
заголовок

Текст, который будет отображаться над диаграммой.

Тип: string
По умолчанию: без названия
заголовокTextStyle

Объект, определяющий стиль текста заголовка. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
рассматриватьLabelsAsText

Если установлено значение true , диаграмма будет рассматривать столбец как текстовый столбец.

Тип: boolean
использоватьFirstColumnAsDomain

Если установлено значение true , диаграмма будет рассматривать столбец как домен.

Тип: boolean
vAxes

Указывает свойства для отдельных вертикальных осей, если диаграмма имеет несколько вертикальных осей. Каждый дочерний объект является объектом vAxis и может содержать все свойства, поддерживаемые vAxis . Значения этих свойств переопределяют любые глобальные настройки для того же свойства.

Чтобы указать диаграмму с несколькими вертикальными осями, сначала определите новую ось с помощью series.targetAxisIndex , а затем настройте ось с помощью vAxes . В следующем примере серия 2 назначается правой оси и задает для нее собственный заголовок и стиль текста:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждый из которых имеет числовую метку, указывающую определяемую им ось — это формат, показанный выше; массив представляет собой массив объектов, по одному на ось. Например, следующая запись в стиле массива идентична объекту vAxis показанному выше:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Тип: Массив объектов или объект с дочерними объектами.
По умолчанию: null
вАксис

Объект с элементами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: object
По умолчанию: null
vAxis.direction

Направление роста значений по вертикальной оси. По умолчанию низкие значения находятся внизу диаграммы. Укажите -1 , чтобы изменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
vAxis.gridlines

Объект с элементами для настройки линий сетки по вертикальной оси. Обратите внимание, что линии сетки по вертикальной оси рисуются горизонтально. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Эта опция поддерживается только для continuous оси.

Тип: object
По умолчанию: null
vAxis.gridlines.color

Цвет вертикальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: '#CCC'
vAxis.gridlines.count

Примерное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы рисовать только одну линию сетки, или 0 , чтобы линии сетки не отображались. Укажите -1 (значение по умолчанию), чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
vAxis.logScale

Если true , вертикальная ось преобразуется в логарифмический масштаб. Примечание. Все значения должны быть положительными.

Тип: boolean
По умолчанию: false
vAxis.maxValue

Перемещает максимальное значение вертикальной оси на указанное значение; на большинстве графиков это будет вверх. Игнорируется, если для этого параметра установлено значение меньше максимального значения y данных. vAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматический
vAxis.minorGridlines

Объект с элементами для настройки второстепенных линий сетки на вертикальной оси, аналогично параметру vAxis.gridlines.

Тип: object
По умолчанию: null
vAxis.minorGridlines.color

Цвет второстепенных вертикальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: сочетание цветов линии сетки и фона.
vAxis.minorGridlines.count

Параметр minorGridlines.count в основном устарел, за исключением отключения второстепенных линий сетки путем установки счетчика на 0 . Количество второстепенных линий сетки зависит от интервала между основными линиями сетки и минимально необходимого пространства.

Тип: number
По умолчанию: 1
vAxis.minValue

Перемещает минимальное значение вертикальной оси на указанное значение; на большинстве графиков это будет снижение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение y данных. vAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: null
vAxis.textPosition

Положение текста вертикальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
vAxis.textStyle

Объект, задающий стиль текста по вертикальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Указывает заголовок вертикальной оси.

Тип: string
По умолчанию: без названия
vAxis.titleTextStyle

Объект, определяющий стиль текста заголовка вертикальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Указывает диапазон обрезки вертикальной оси.

Тип: object
По умолчанию: null
vAxis.viewWindow.max

Максимальное значение вертикальных данных для визуализации.

Игнорируется, когда vAxis.viewWindowMode имеет значение «красивый» или «максимальный».

Тип: number
По умолчанию: авто
vAxis.viewWindow.min

Минимальное значение вертикальных данных для визуализации.

Игнорируется, когда vAxis.viewWindowMode имеет значение «красивый» или «максимальный».

Тип: number
По умолчанию: авто

Параметры конфигурации гистограммы

Имя
фонЦвет

Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: 'red' или '#00cc00' , либо объект со следующими свойствами.

Тип: string или object
По умолчанию: 'white'
фонЦвет.заливка

Цвет заливки диаграммы в виде цветовой строки HTML.

Тип: string
По умолчанию: 'white'
область диаграммы

Объект с элементами для настройки размещения и размера области диаграммы (где рисуется сама диаграмма, исключая оси и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: object
По умолчанию: null
chartArea.backgroundColor
Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc' ), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
  • stroke : цвет, представленный в виде шестнадцатеричной строки или английского названия цвета.
  • strokeWidth : Если предусмотрено, рисует границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: string или object
По умолчанию: 'white'
диаграммаArea.height

Высота области диаграммы.

Тип: number или string
По умолчанию: авто
диаграммаArea.left

Насколько далеко рисовать диаграмму от левой границы.

Тип: number или string
По умолчанию: авто
диаграммаArea.top

На каком расстоянии рисовать диаграмму от верхней границы.

Тип: number или string
По умолчанию: авто
ChartArea.width

Ширина области диаграммы.

Тип: число или string
По умолчанию: авто
цвета

Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: colors:['red','#004411'] .

Тип: Массив строк.
По умолчанию: цвета по умолчанию
hAxes

Указывает свойства для отдельных горизонтальных осей, если диаграмма имеет несколько горизонтальных осей. Каждый дочерний объект является объектом hAxis и может содержать все свойства, поддерживаемые hAxis . Значения этих свойств переопределяют любые глобальные настройки для того же свойства.

Чтобы указать диаграмму с несколькими горизонтальными осями, сначала определите новую ось с помощью series.targetAxisIndex , а затем настройте ось с помощью hAxes . В следующем примере серия 1 назначается нижней оси и задает для нее собственный заголовок и стиль текста:

series:{1:{targetAxisIndex:1{% raw %}}}{% endraw %}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'{% raw %}}}{% endraw %}}

Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждый из которых имеет числовую метку, указывающую определяемую им ось — это формат, показанный выше; массив представляет собой массив объектов, по одному на ось. Например, следующая запись в стиле массива идентична объекту hAxis показанному выше:

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
    
Тип: Массив объектов или объект с дочерними объектами.
По умолчанию: null
ось

Объект с элементами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Тип: object
По умолчанию: null
hAxis.direction

Направление роста значений по горизонтальной оси. Укажите -1 , чтобы изменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
hAxis.gridlines

Объект со свойствами для настройки линий сетки на горизонтальной оси. Обратите внимание, что линии сетки по горизонтальной оси рисуются вертикально. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Эта опция поддерживается только для continuous оси.

Тип: object
По умолчанию: null
hAxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: '#CCC'
hAxis.gridlines.count

Примерное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы рисовать только одну линию сетки, или 0 , чтобы линии сетки не отображались. Укажите -1 (значение по умолчанию), чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
hAxis.logScale

Свойство hAxis , которое преобразует горизонтальную ось в логарифмический масштаб (требуется, чтобы все значения были положительными). Установите значение true для «да».

Эта опция поддерживается только для continuous оси.

Тип: boolean
По умолчанию: false
hAxis.maxValue

Перемещает максимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет вправо. Игнорируется, если для этого параметра установлено значение меньше максимального значения x данных. hAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматический
hAxis.minorGridlines

Объект с элементами для настройки второстепенных линий сетки на горизонтальной оси, аналогично параметру hAxis.gridlines .

Эта опция поддерживается только для continuous оси.

Тип: object
По умолчанию: null
hAxis.minorGridlines.color

Цвет второстепенных горизонтальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML.

Тип: string
По умолчанию: сочетание цветов линии сетки и фона.
hAxis.minorGridlines.count

Опция minorGridlines.count по большей части устарела, за исключением отключения второстепенных линий сетки путем установки счетчика равным 0. Количество второстепенных линий сетки теперь полностью зависит от интервала между основными линиями сетки (см. hAxis.gridlines.interval ) и минимально необходимого пространства (см. hAxis.minorGridlines.minSpacing ).

Тип: number
По умолчанию: 1
hAxis.minValue

Перемещает минимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет левое положение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение x данных. hAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: автоматический
hAxis.textPosition

Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
hAxis.textStyle

Объект, определяющий стиль текста по горизонтальной оси. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

Свойство hAxis , определяющее заголовок горизонтальной оси.

Тип: string
По умолчанию: null
hAxis.titleTextStyle

Объект, определяющий стиль текста заголовка по горизонтальной оси. Объект имеет следующий формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Указывает диапазон обрезки горизонтальной оси.

Тип: object
По умолчанию: null
hAxis.viewWindow.max

Максимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение 'pretty' или 'maximized' .

Тип: number
По умолчанию: авто
hAxis.viewWindow.min

Минимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение 'pretty' или 'maximized' .

Тип: number
По умолчанию: авто
высота

Высота диаграммы в пикселях.

Тип: number
По умолчанию: высота содержащего элемента.
isStacked

Если установлено значение true , элементы для всех серий складываются в каждое значение домена. Примечание. В диаграммах «Столбец» , «Область » и «Ступенчатая область» Google Charts меняет порядок элементов легенды на обратный, чтобы лучше соответствовать расположению элементов серии (например, серия 0 будет самым нижним элементом легенды). Это не относится к гистограммам .

Параметр isStacked также поддерживает 100%-ное стекирование, при котором стеки элементов в каждом значении домена масштабируются до 100%.

Параметры isStacked :

  • false — элементы не будут складываться. Это опция по умолчанию.
  • true — объединяет элементы для всех серий в каждом значении домена.
  • 'percent' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 100 %, при этом значение каждого элемента рассчитывается как процент, равный 100 %.
  • 'relative' — суммирует элементы для всех серий по каждому значению домена и масштабирует их так, чтобы их сумма составляла 1, при этом значение каждого элемента рассчитывается как дробь от 1.
  • 'absolute' — работает так же, как isStacked: true .

При 100% суммировании расчетное значение для каждого элемента появится во всплывающей подсказке после его фактического значения.

Целевая ось по умолчанию будет отображать значения деления на основе относительной шкалы 0–1 в виде долей от 1 для 'relative' и 0–100 % для 'percent' ( Примечание: при использовании параметра 'percent' значения оси/тикинга отображаются в процентах, однако фактические значения представляют собой относительные значения шкалы 0–1. Это связано с тем, что деления процентной оси являются результатом применения формата «#.##%» к относительным значениям шкалы 0–1. с использованием isStacked: 'percent' , обязательно указывайте все деления/линии сетки, используя относительные значения шкалы 0–1). Вы можете настроить значения линий сетки/отметок и форматирование, используя соответствующие параметры hAxis/vAxis .

100-процентное стекирование поддерживает только значения данных типа number и должно иметь нулевую базовую линию.

Тип: boolean / string
По умолчанию: false
легенда

Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: object
По умолчанию: null
легенда.позиция

Позиция легенды. Может быть одним из следующих:

  • 'bottom' — под графиком.
  • 'left' — слева от диаграммы, при условии, что с левой осью не связана никакая серия. Поэтому, если вам нужна легенда слева, используйте опцию targetAxisIndex: 1 .
  • 'in' — внутри диаграммы, в верхнем левом углу.
  • 'none' — легенда не отображается.
  • 'right' - Справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - Над графиком.
Тип: string
По умолчанию: 'right'
LegendTextStyle

Объект, определяющий стиль текста легенды. Объект имеет такой формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
обратныеКатегории

Если установлено значение true , серия рисуется справа налево. По умолчанию рисуется слева направо.

Эта опция поддерживается только для discrete major оси.

Тип: boolean
По умолчанию: false
ряд

Массив объектов, каждый из которых описывает формат соответствующей серии на диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {} . Если серия или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:

  • annotations — объект, который будет применен к аннотациям этой серии. Это можно использовать, например, для управления textStyle для серии:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Ознакомьтесь с различными вариантами annotations , чтобы получить более полный список того, что можно настроить.

  • color — цвет, используемый для этой серии. Укажите допустимую цветовую строку HTML.
  • labelInLegend — описание ряда, которое будет отображаться в легенде диаграммы.
  • targetAxisIndex — какой оси назначить эту серию, где 0 — ось по умолчанию, а 1 — противоположная ось. Значение по умолчанию — 0 ; установите значение 1 чтобы определить диаграмму, на которой разные ряды отображаются по разным осям. По крайней мере одна серия должна быть отнесена к оси по умолчанию. Вы можете определить разный масштаб для разных осей.
  • visibleInLegendboolean значение, где true означает, что серия должна иметь запись легенды, а false означает, что ее не должно быть. По умолчанию true .

Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, в котором каждый дочерний элемент имеет числовой ключ, указывающий, к какой серии он применяется. Например, следующие два объявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертую — красной и отсутствующей в легенде:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Тип: Массив объектов или объект со вложенными объектами.
По умолчанию: {}
субтитры

Текст, который будет отображаться под заголовком диаграммы.

Тип: string
По умолчанию: без названия
стиль текста субтитров

Объект, определяющий стиль текста заголовка.

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

Тема - это набор предопределенных значений опции, которые работают вместе для достижения конкретного поведения в диаграмме или визуального эффекта. В настоящее время доступна только одна тема:

  • 'maximized' - максимизирует область диаграммы и рисует легенду и все этикетки внутри области диаграммы.
Тип: string
По умолчанию: null
заголовок

Текст для отображения над диаграммой.

Тип: string
По умолчанию: нет заголовка
titletextstyle

Объект, который указывает стиль текста заголовка. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Тенденные линии

Отображает линии тренда на диаграммах, которые их поддерживают. По умолчанию используются linear линии тренда, но это можно настроить с помощью trendlines. n .type Option.

Линии тренда указаны на основе каждого серии, поэтому в большинстве случаев ваши варианты будут выглядеть так:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    
Тип: object
По умолчанию: null
Trendlines.n.color

Цвет линии тренда , выраженный как английское название цвета или шестнадцатеричную струну.

Тип: string
По умолчанию: цвет серии по умолчанию
Trendlines.n.degree

Для линий типа type: 'polynomial' , степень полинома ( 2 для квадратичного, 3 для кубического и т. Д.).

Тип: number
По умолчанию: 3
Trendlines.n.labelinlegend

Если установить, линия тренда появится в легенде в качестве этой строки.

Тип: string
По умолчанию: null
Trendlines.n.linewidth

Ширина линии линии тренда , в пикселях.

Тип: number
По умолчанию: 2
Trendlines.n.type

Независимо от того, является ли линии тренда 'linear' (по умолчанию), 'exponential' или 'polynomial' .

Тип: string
По умолчанию: linear
Trendlines.n.visibleinlegend

Появляется ли уравнение линии тренда в легенде. Он появится в всплеске инструментов Trendline.

Тип: boolean
По умолчанию: false
USEFIRSTCOLUMNASDODED

Если установить true , диаграмма будет рассматривать столбец как домен.

Тип: boolean
Vaxis

Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: object
По умолчанию: null
vaxis. direction

Направление, в котором растут значения вдоль вертикальной оси. По умолчанию низкие значения находятся в нижней части диаграммы. Укажите -1 , чтобы отменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
vaxis.gridlines

Объект с членами для настройки линий сетки на вертикальной оси. Обратите внимание, что сетки с вертикальной осью нарисованы горизонтально. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
vaxis.gridlines.color

Цвет вертикальных сетки внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: '#CCC'
vaxis.gridlines.count

Приблизительное количество горизонтальных сетки внутри области диаграммы. Если вы указали положительное число для gridlines.count . Связь, оно будет использовано для вычисления minSpacing между сетками. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки или 0 , чтобы нарисовать линии сетки. Укажите -1 , который является по умолчанию, чтобы автоматически вычислять количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
vaxis.logscale

Если true , делает вертикальную ось логарифмической шкалой. Примечание: все значения должны быть положительными.

Тип: boolean
По умолчанию: false
vaxis.maxvalue

Перемещает максимальное значение вертикальной оси к указанному значению; Это будет вверх в большинстве графиков. Игнорируется, если это установлено значение меньше, чем максимальное значение y данных. vAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
vaxis.minorgridlines

Объект с членами для настройки незначительных сетей на вертикальной оси, аналогично опции vaxis.gridlines.

Тип: object
По умолчанию: null
vaxis.minorgridlines.color

Цвет вертикальных незначительных сетки в области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: смесь линии сетки и фоновых цветов
vaxis.minorgridlines.count

Опция minorGridlines.count в основном устарела, за исключением отключения незначительных сетей, установив счет на 0 . Количество небольших сетей зависит от интервала между основными сетками и минимальным требуемым пространством.

Тип: number
По умолчанию: 1
vaxis.minvalue

Перемещает значение MIN вертикальной оси к указанному значению; Это будет вниз в большинстве графиков. Игнорируется, если это установлено значение, превышающему минимальное значение y данных. vAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: null
Vaxis.TextPosition

Положение текста вертикальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
vaxis.textstyle

Объект, который указывает стиль текста вертикальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.title

Указывает заголовок для вертикальной оси.

Тип: string
По умолчанию: нет заголовка
vaxis.titletextstyle

Объект, который указывает стиль текста с вертикальной осью. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.viewwindow

Указывает диапазон обрезки вертикальной оси.

Тип: object
По умолчанию: null
vaxis.viewwindow.max

Максимальное значение вертикального данных для рендеринга.

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: number
По умолчанию: Auto
vaxis.viewwindow.min

Минимальное значение вертикального данных для рендеринга.

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: number
По умолчанию: Auto

Варианты конфигурации пузырьковой диаграммы

Имя
фоновая кожура

Цвет фона для основной области диаграммы. Может быть либо простая цветная строка HTML, например: 'red' или '#00cc00' , либо объектом со следующими свойствами.

Тип: string или object
По умолчанию: 'white'
founalcolor.fill

Цвет заполнения диаграммы, как цветовая струна HTML.

Тип: string
По умолчанию: 'white'
пузырь

Объект с участниками для настройки визуальных свойств пузырьков.

Тип: object
По умолчанию: null
пузырь

Непрозрачность пузырьков, где 0 полностью прозрачна и 1 полностью непрозрачна.

Тип: число от 0,0 до 1,0
По умолчанию: 0,8
Bubble.Stroke

Цвет удара пузырьков.

Тип: string
По умолчанию: '#ccc'
Bubble.TextStyle

Объект, который указывает стиль пузырька. У объекта есть этот формат:

{color: <string>, fontName: <string>, fontSize: <number>}

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Chartarea

Объект с членами для настройки размещения и размера области диаграммы (где сама диаграмма нарисована, исключая ось и легенды). Поддерживаются два формата: число или число, за которым следуют %. Простое число - это значение в пикселях; Число, за которым следует процент, составляет процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: object
По умолчанию: null
chartarea.backgroundcolor
Цвет фона схемы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc' ), либо английское имя цвета. Когда используется объект, могут быть предоставлены следующие свойства:
  • stroke : цвет, предоставляемый как шестнадцатеричная струна или английское название цвета.
  • strokeWidth : если предоставлена, вытягивает границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: string или object
По умолчанию: 'white'
Chartarea.height

Площадь диаграммы высота.

Тип: number или string
По умолчанию: Auto
chartarea.left

Как далеко нарисовать диаграмму от левой границы.

Тип: number или string
По умолчанию: Auto
chartarea.top

Как далеко нарисовать диаграмму от верхней границы.

Тип: number или string
По умолчанию: Auto
chartarea.width

Ширина области диаграммы.

Тип: number или string
По умолчанию: Auto
цвета

Цвета, которые можно использовать для элементов диаграммы. Массив струн, где каждый элемент представляет собой цветную строку HTML, например: colors:['red','#004411'] .

Тип: массив струн
По умолчанию: цвета по умолчанию
Haxis

Объект с членами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Тип: object
По умолчанию: null
haxis. direction

Направление, в котором растут значения вдоль горизонтальной оси. Укажите -1 , чтобы отменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
haxis.gridlines

Объект со свойствами для настройки сетки на горизонтальной оси. Обратите внимание, что сетки горизонтальной оси нарисованы вертикально. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
haxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: '#CCC'
haxis.gridlines.count

Приблизительное количество горизонтальных сетки внутри области диаграммы. Если вы указали положительное число для gridlines.count . Связь, оно будет использовано для вычисления minSpacing между сетками. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки или 0 , чтобы нарисовать линии сетки. Укажите -1 , который является по умолчанию, чтобы автоматически вычислять количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
haxis.logscale

свойство hAxis , которое делает горизонтальную ось логарифмической шкалой (требует положительных значений). Установите true для да.

Этот вариант поддерживается только для continuous оси.

Тип: boolean
По умолчанию: false
haxis.maxvalue

Перемещает максимальное значение горизонтальной оси к указанному значению; Это будет вправо в большинстве графиков. Игнорируется, если это установлено значение меньше максимального x-значения данных. hAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
haxis.minorgridlines

Объект с членами для настройки незначительных сетей на горизонтальной оси, аналогично опции hAxis.gridlines .

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
haxis.minorgridlines.color

Цвет горизонтальных второстепенных сетей внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: смесь линии сетки и фоновых цветов
haxis.minorgridlines.count

Опция minorGridlines.count в основном устарела, за исключением отключения незначительных сетей, установив счет на 0. Количество незначительных линий сетки теперь полностью зависит от интервала между основными сетками (см. hAxis.gridlines.interval ) и минимальное необходимое пространство (см. См. hAxis.minorGridlines.minSpacing ).

Тип: number
По умолчанию: 1
haxis.minvalue

Перемещает значение MIN горизонтальной оси к указанному значению; Это будет оставлен в большинстве графиков. Игнорируется, если это установлено значение, большее, чем минимальное x-значение данных. hAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
Haxis.TextPosition

Положение текста горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
haxis.textstyle

Объект, который указывает стиль текста горизонтальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
haxis.title

свойство hAxis , которое указывает заголовок горизонтальной оси.

Тип: string
По умолчанию: null
haxis.titletextstyle

Объект, который указывает стиль текста титула горизонтальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
haxis.viewwindow

Указывает диапазон обрезки горизонтальной оси.

Тип: object
По умолчанию: null
haxis.viewwindow.max

Максимальное горизонтальное значение данных для рендеринга.

Игнорируется, когда hAxis.viewWindowMode является 'pretty' или 'maximized' .

Тип: number
По умолчанию: Auto
haxis.viewwindow.min

Минимальное горизонтальное значение данных для рендеринга.

Игнорируется, когда hAxis.viewWindowMode является 'pretty' или 'maximized' .

Тип: number
По умолчанию: Auto
высота

Высота диаграммы в пикселях.

Тип: number
По умолчанию: высота содержащегося элемента
легенда

Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: object
По умолчанию: null
Легенда

Положение легенды. Может быть одним из следующих:

  • 'bottom' - под диаграммой.
  • 'left' - слева от диаграммы, при условии, что левая ось не связана с ней. Поэтому, если вы хотите легенду слева, используйте опцию targetAxisIndex: 1 .
  • 'in' - Внутри графика, под верхним левым углом.
  • 'none' - легенда не отображается.
  • 'right' - справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - над диаграммой.
Тип: string
По умолчанию: 'right'
LegendTextStyle

Объект, который указывает стиль текста легенды. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ряд

Объектом объектов, где ключи являются именами серий (значения в цветовом столбце) и каждый объект, описывающий формат соответствующего ряда в диаграмме. Если серия или значение не указано, глобальное значение будет использоваться. Каждый объект поддерживает следующие свойства:

  • color - цвет для использования для этой серии. Укажите действительную цветную строку HTML.
  • visibleInLegend - boolean значение, где true означает, что серия должна иметь легендарную запись, а false означает, что это не должно. По умолчанию true .
Пример:
series: {'Europe': {color: 'green'}}
Тип: объект с вложенными объектами
По умолчанию: {}
Sizeaxis

Объект с членами для настройки того, как значения связаны с размером пузырьков. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

 {minValue: 0,  maxSize: 20}
Тип: object
По умолчанию: null
sizeaxis.maxsize

Максимальный радиус максимально возможного пузыря в пикселях.

Тип: number
По умолчанию: 30
sizeaxis.minsize

Минимальный радиус максимально возможного пузыря в пикселях.

Тип: number
По умолчанию: 5
субтитры

Текст для отображения под заголовком диаграммы.

Тип: string
По умолчанию: нет заголовка
subtitletextstyle

Объект, который указывает стиль текста заголовка.

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

Тема - это набор предопределенных значений опции, которые работают вместе для достижения конкретного поведения в диаграмме или визуального эффекта. В настоящее время доступна только одна тема:

  • 'maximized' - максимизирует область диаграммы и рисует легенду и все этикетки внутри области диаграммы.
Тип: string
По умолчанию: null
заголовок

Текст для отображения над диаграммой.

Тип: string
По умолчанию: нет заголовка
titletextstyle

Объект, который указывает стиль текста заголовка. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
TreatlabelSastext

Если установить true , диаграмма будет рассматривать столбец как текстовый столбец.

Тип: boolean
USEFIRSTCOLUMNASDODED

Если установить true , диаграмма будет рассматривать столбец как домен.

Тип: boolean
vaxes

Определяет свойства для отдельных вертикальных оси, если диаграмма имеет несколько вертикальных оси. Каждый дочерний объект является объектом vAxis и может содержать все свойства, поддерживаемые vAxis . Эти значения свойства переопределяют любые глобальные настройки для того же свойства.

Чтобы указать диаграмму с несколькими вертикальными осями, сначала определите новую ось, используя series.targetAxisIndex , затем настройте оси с использованием vAxes . В следующем примере присваивается серия 2 на правую ось и определяет пользовательский заголовок и стиль текста для него:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждая из которых с числовой меткой, которая определяет ось, которую он определяет-это формат, показанный выше; Массив представляет собой массив объектов, по одному на ось. Например, следующая нотация в стиле массива идентична объекту vAxis показанного выше:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Тип: массив объекта или объект с дочерними объектами
По умолчанию: null
Vaxis

Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: object
По умолчанию: null
vaxis. direction

Направление, в котором растут значения вдоль вертикальной оси. По умолчанию низкие значения находятся в нижней части диаграммы. Укажите -1 , чтобы отменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
vaxis.gridlines

Объект с членами для настройки линий сетки на вертикальной оси. Обратите внимание, что сетки с вертикальной осью нарисованы горизонтально. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
vaxis.gridlines.color

Цвет вертикальных сетки внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: '#CCC'
vaxis.gridlines.count

Приблизительное количество горизонтальных сетки внутри области диаграммы. Если вы указали положительное число для gridlines.count . Связь, оно будет использовано для вычисления minSpacing между сетками. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки или 0 , чтобы нарисовать линии сетки. Укажите -1 , который является по умолчанию, чтобы автоматически вычислять количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
vaxis.logscale

Если true , делает вертикальную ось логарифмической шкалой. Примечание: все значения должны быть положительными.

Тип: boolean
По умолчанию: false
vaxis.maxvalue

Перемещает максимальное значение вертикальной оси к указанному значению; Это будет вверх в большинстве графиков. Игнорируется, если это установлено значение меньше, чем максимальное значение y данных. vAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
vaxis.minorgridlines

Объект с членами для настройки незначительных сетей на вертикальной оси, аналогично опции vaxis.gridlines.

Тип: object
По умолчанию: null
vaxis.minorgridlines.color

Цвет вертикальных незначительных сетки в области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: смесь линии сетки и фоновых цветов
vaxis.minorgridlines.count

Опция minorGridlines.count в основном устарела, за исключением отключения незначительных сетей, установив счет на 0 . Количество небольших сетей зависит от интервала между основными сетками и минимальным требуемым пространством.

Тип: number
По умолчанию: 1
vaxis.minvalue

Перемещает значение MIN вертикальной оси к указанному значению; Это будет вниз в большинстве графиков. Игнорируется, если это установлено значение, превышающему минимальное значение y данных. vAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: null
Vaxis.TextPosition

Положение текста вертикальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
vaxis.textstyle

Объект, который указывает стиль текста вертикальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.title

Указывает заголовок для вертикальной оси.

Тип: string
По умолчанию: нет заголовка
vaxis.titletextstyle

Объект, который указывает стиль текста с вертикальной осью. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vaxis.viewwindow

Указывает диапазон обрезки вертикальной оси.

Тип: object
По умолчанию: null
vaxis.viewwindow.max

Максимальное значение вертикального данных для рендеринга.

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: number
По умолчанию: Auto
vaxis.viewwindow.min

Минимальное значение вертикального данных для рендеринга.

Игнорируется, когда vAxis.viewWindowMode «симпатичный» или «максимизирован».

Тип: number
По умолчанию: Auto

Параметры конфигурации календаря

Имя
высота

Высота диаграммы в пикселях.

Тип: number
По умолчанию: высота содержащегося элемента
ширина

Ширина диаграммы в пикселях.

Тип: number
По умолчанию: ширина содержащего элемента

Параметры конфигурации диаграммы подсвечника

Имя
фоновая кожура

Цвет фона для основной области диаграммы. Может быть либо простая цветная строка HTML, например: 'red' или '#00cc00' , либо объектом со следующими свойствами.

Тип: string или object
По умолчанию: 'white'
founalcolor.fill

Цвет заполнения диаграммы, как цветовая струна HTML.

Тип: string
По умолчанию: 'white'
Chartarea

Объект с членами для настройки размещения и размера области диаграммы (где сама диаграмма нарисована, исключая ось и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число - это значение в пикселях; Число, за которым следует процент, составляет процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: object
По умолчанию: null
chartarea.backgroundcolor
Цвет фона схемы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc' ), либо английское имя цвета. Когда используется объект, могут быть предоставлены следующие свойства:
  • stroke : цвет, предоставляемый как шестнадцатеричная струна или английское название цвета.
  • strokeWidth : если предоставлена, вытягивает границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: string или object
По умолчанию: 'white'
Chartarea.height

Площадь диаграммы высота.

Тип: number или string
По умолчанию: Auto
chartarea.left

Как далеко нарисовать диаграмму от левой границы.

Тип: number или string
По умолчанию: Auto
chartarea.top

Как далеко нарисовать диаграмму от верхней границы.

Тип: number или string
По умолчанию: Auto
chartarea.width

Ширина области диаграммы.

Тип: number или string
По умолчанию: Auto
цвета

Цвета, которые можно использовать для элементов диаграммы. Массив струн, где каждый элемент представляет собой цветную строку HTML, например: colors:['red','#004411'] .

Тип: массив струн
По умолчанию: цвета по умолчанию
Haxis

Объект с членами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Тип: object
По умолчанию: null
haxis. direction

Направление, в котором растут значения вдоль горизонтальной оси. Укажите -1 , чтобы отменить порядок значений.

Тип: 1 или -1
По умолчанию: 1
haxis.gridlines

Объект со свойствами для настройки сетки на горизонтальной оси. Обратите внимание, что сетки горизонтальной оси нарисованы вертикально. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{color: '#333', minSpacing: 20}

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
haxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: '#CCC'
haxis.gridlines.count

Приблизительное количество горизонтальных сетки внутри области диаграммы. Если вы указали положительное число для gridlines.count . Связь, оно будет использовано для вычисления minSpacing между сетками. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки или 0 , чтобы нарисовать линии сетки. Укажите -1 , который является по умолчанию, чтобы автоматически вычислять количество линий сетки на основе других параметров.

Тип: number
По умолчанию: -1
haxis.logscale

свойство hAxis , которое делает горизонтальную ось логарифмической шкалой (требует положительных значений). Установите true для да.

Этот вариант поддерживается только для continuous оси.

Тип: boolean
По умолчанию: false
haxis.maxvalue

Перемещает максимальное значение горизонтальной оси к указанному значению; Это будет вправо в большинстве графиков. Игнорируется, если это установлено значение меньше максимального x-значения данных. hAxis.viewWindow.max переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
haxis.minorgridlines

Объект с членами для настройки незначительных сетей на горизонтальной оси, аналогично опции hAxis.gridlines .

Этот вариант поддерживается только для continuous оси.

Тип: object
По умолчанию: null
haxis.minorgridlines.color

Цвет горизонтальных второстепенных сетей внутри области диаграммы. Укажите действительную цветную строку HTML.

Тип: string
По умолчанию: смесь линии сетки и фоновых цветов
haxis.minorgridlines.count

Опция minorGridlines.count в основном устарела, за исключением отключения незначительных сетей, установив счет на 0. Количество незначительных линий сетки теперь полностью зависит от интервала между основными сетками (см. hAxis.gridlines.interval ) и минимальное необходимое пространство (см. См. hAxis.minorGridlines.minSpacing ).

Тип: number
По умолчанию: 1
haxis.minvalue

Перемещает значение MIN горизонтальной оси к указанному значению; Это будет оставлен в большинстве графиков. Игнорируется, если это установлено значение, большее, чем минимальное x-значение данных. hAxis.viewWindow.min переопределяет это свойство.

Тип: number
По умолчанию: автоматическое
Haxis.TextPosition

Положение текста горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out' , 'in' , 'none' .

Тип: string
По умолчанию: 'out'
haxis.textstyle

Объект, который указывает стиль текста горизонтальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
haxis.title

свойство hAxis , которое указывает заголовок горизонтальной оси.

Тип: string
По умолчанию: null
haxis.titletextstyle

Объект, который указывает стиль текста титула горизонтальной оси. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
haxis.viewwindow

Указывает диапазон обрезки горизонтальной оси.

Тип: object
По умолчанию: null
haxis.viewwindow.max

Максимальное горизонтальное значение данных для рендеринга.

Игнорируется, когда hAxis.viewWindowMode является 'pretty' или 'maximized' .

Тип: number
По умолчанию: Auto
haxis.viewwindow.min

Минимальное горизонтальное значение данных для рендеринга.

Игнорируется, когда hAxis.viewWindowMode является 'pretty' или 'maximized' .

Тип: number
По умолчанию: Auto
высота

Высота диаграммы в пикселях.

Тип: number
По умолчанию: высота содержащегося элемента
легенда

Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: object
По умолчанию: null
Легенда

Положение легенды. Может быть одним из следующих:

  • 'bottom' - под диаграммой.
  • 'left' - слева от диаграммы, при условии, что левая ось не связана с ней. Поэтому, если вы хотите легенду слева, используйте опцию targetAxisIndex: 1 .
  • 'in' - Внутри графика, под верхним левым углом.
  • 'none' - легенда не отображается.
  • 'right' - справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - над диаграммой.
Тип: string
По умолчанию: 'right'
LegendTextStyle

Объект, который указывает стиль текста легенды. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Reversecategories

Если установлено в true , рисует серию справа налево. По умолчанию - нарисовать влево направо.

Этот вариант поддерживается только для discrete major оси.

Тип: boolean
По умолчанию: false
ряд

Массив объектов, каждый из которых описывает формат соответствующей серии в диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {} . Если серия или значение не указано, глобальное значение будет использоваться. Каждый объект поддерживает следующие свойства:

  • color - цвет для использования для этой серии. Укажите действительную цветную строку HTML.
  • fallingColor.fill - переопределяет Global candlestick.fallingColor.fill для этой серии.
  • fallingColor.stroke - переопределяет глобальный candlestick.fallingColor.stroke для этой серии.
  • fallingColor.strokeWidth - переопределяет глобальный candlestick.fallingColor.strokeWidth для этой серии.
  • labelInLegend - описание серии, чтобы появиться в легенде графика.
  • risingColor.fill - переопределяет глобальный candlestick.risingColor.fill для этой серии.
  • risingColor.stroke - переопределяет глобальную candlestick.risingColor.stroke для этой серии.
  • risingColor.strokeWidth - переопределяет глобальный candlestick.risingColor.strokeWidth для этой серии.
  • targetAxisIndex - какая ось назначать эту серию, где 0 - ось по умолчанию, а 1 - противоположная ось. Значение по умолчанию составляет 0 ; Установите 1 чтобы определить диаграмму, где различные серии отображаются против разных оси. По крайней мере, одна серия должна быть выделена по оси по умолчанию. Вы можете определить другую шкалу для разных осей.
  • visibleInLegend - boolean значение, где true означает, что серия должна иметь легендарную запись, а false означает, что это не должно. По умолчанию true .

Вы можете указать либо массив объектов, каждый из которых относится к серии в данном порядке, либо вы можете указать объект, в котором у каждого ребенка есть числовое ключ, указывающий, к какой серии он применим. Например, следующие два заявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертый - красный и отсутствующий от легенды:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Тип: массив объектов или объект с вложенными объектами
По умолчанию: {}
субтитры

Текст для отображения под заголовком диаграммы.

Тип: string
По умолчанию: нет заголовка
subtitletextstyle

Объект, который указывает стиль текста заголовка.

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

Тема - это набор предопределенных значений опции, которые работают вместе для достижения конкретного поведения в диаграмме или визуального эффекта. В настоящее время доступна только одна тема:

  • 'maximized' - максимизирует область диаграммы и рисует легенду и все этикетки внутри области диаграммы.
Тип: string
По умолчанию: null
заголовок

Текст для отображения над диаграммой.

Тип: string
По умолчанию: нет заголовка
titletextstyle

Объект, который указывает стиль текста заголовка. У объекта есть этот формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color может быть любой цветной струной HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: object
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
USEFIRSTCOLUMNASDODED

Если установить true , диаграмма будет рассматривать столбец как домен.

Тип: boolean
vaxes

Определяет свойства для отдельных вертикальных оси, если диаграмма имеет несколько вертикальных оси. Каждый дочерний объект является объектом vAxis и может содержать все свойства, поддерживаемые vAxis . Эти значения свойства переопределяют любые глобальные настройки для того же свойства.

Чтобы указать диаграмму с несколькими вертикальными осями, сначала определите новую ось, используя series.targetAxisIndex , затем настройте оси с использованием vAxes . В следующем примере присваивается серия 2 на правую ось и определяет пользовательский заголовок и стиль текста для него:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждая из которых с числовой меткой, которая определяет ось, которую он определяет-это формат, показанный выше; Массив представляет собой массив объектов, по одному на ось. Например, следующая нотация в стиле массива идентична объекту vAxis показанного выше:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Тип: массив объекта или объект с дочерними объектами
По умолчанию: null
Vaxis

Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальные нотации объекта, как показано здесь:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto

Column chart configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean
Default: false
hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval ) and the minimum required space (see hAxis.minorGridlines.minSpacing ).

Type: number
Default: 1
hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number
Default: automatic
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
isStacked

If set to true , stacks the elements for all series at each domain value. Note: In Column , Area , and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (Eg series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

  • false — elements will not stack. This is the default option.
  • true — stacks elements for all series at each domain value.
  • 'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
  • 'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
  • 'absolute' — functions the same as isStacked: true .

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative' , and 0-100% for 'percent' ( Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When с использованием isStacked: 'percent' , be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number , and must have a baseline of zero.

Type: boolean / string
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • annotations - An object to be applied to annotations for this series. This can be used to control, for instance, the textStyle for the series:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    See the various annotations options for a more complete list of what can be customized.

  • color - The color to use for this series. Specify a valid HTML color string.
  • labelInLegend - The description of the series to appear in the chart legend.
  • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines. n .type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    
Type: object
Default: null
trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string
Default: default series color
trendlines.n.degree

For trendlines of type: 'polynomial' , the degree of the polynomial ( 2 for quadratic, 3 for cubic, and so on).

Type: number
Default: 3
trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string
Default: null
trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number
Default: 2
trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential' , or 'polynomial' .

Type: string
Default: linear
trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean
Default: false
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto

Combo chart configuration options

Имя
areaOpacity

The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the series property.

Type: number , 0.0- 1.0
Default: 0.3
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

  • 'none' - Straight lines without curve.
  • 'function' - The angles of the line will be smoothed.
Type: string
Default: 'none'
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean
Default: false
hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval ) and the minimum required space (see hAxis.minorGridlines.minSpacing ).

Type: number
Default: 1
hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number
Default: automatic
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
interpolateNulls

Whether to guess the value of missing points. If true , it will guess the value of any missing data based on neighboring points. If false , it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean
Default: false
isStacked

If set to true , stacks the elements for all series at each domain value. Note: In Column , Area , and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (Eg series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

  • false — elements will not stack. This is the default option.
  • true — stacks elements for all series at each domain value.
  • 'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
  • 'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
  • 'absolute' — functions the same as isStacked: true .

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative' , and 0-100% for 'percent' ( Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When с использованием isStacked: 'percent' , be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number , and must have a baseline of zero.

Type: boolean / string
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number
Default: 2
pointShape

The shape of individual data elements: 'circle' , 'triangle' , 'square' , 'diamond' , 'star' or 'polygon' . See the points documentation for examples.

Type: string
Default: 'circle'
pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline , the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number
Default: 0
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • annotations - An object to be applied to annotations for this series. This can be used to control, for instance, the textStyle for the series:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    See the various annotations options for a more complete list of what can be customized.

  • areaOpacity - Overrides the global areaOpacity for this series..
  • color - The color to use for this series. Specify a valid HTML color string.
  • curveType - Overrides the global curveType value for this series.
  • fallingColor.fill - Overrides the global candlestick.fallingColor.fill value for this series.
  • fallingColor.stroke - Overrides the global candlestick.fallingColor.stroke value for this series.
  • fallingColor.strokeWidth - Overrides the global candlestick.fallingColor.strokeWidth value for this series.
  • labelInLegend - The description of the series to appear in the chart legend.
  • lineDashStyle - Overrides the global lineDashStyle value for this series.
  • lineWidth - Overrides the global lineWidth value for this series.
  • pointShape - Overrides the global pointShape value for this series.
  • pointSize - Overrides the global pointSize value for this series.
  • pointsVisible - Overrides the global pointsVisible value for this series.
  • risingColor.fill - Overrides the global candlestick.risingColor.fill value for this series.
  • risingColor.stroke - Overrides the global candlestick.risingColor.stroke value for this series.
  • risingColor.strokeWidth - Overrides the global candlestick.risingColor.strokeWidth value for this series.
  • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.
  • type - The type of marker for this series. Valid values are 'line', 'area', 'bars', and 'steppedArea'. Note that bars are actually vertical bars (columns). The default value is specified by the chart's seriesType option.
  • visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto

Gauge configuration options

Имя
greenColor

The color to use for the green section in HTML color notation.

Type: string
Default: '#109618'
greenFrom

The lowest value for a range marked by a green color.

Type: number
Default: none
greenTo

The highest value for a range marked by a green color.

Type: number
Default: none
высота

Height of the chart in pixels.

Type: number
Default: Container's width
Макс

The maximum value to show on the Y axis. If the maximum data point exceeds this value, this setting is ignored, and the chart is adjusted to show the next major tick mark above the maximum data point. This takes precedence over the Y axis maximum determined by scaleType .

This is similar to maxValue in core charts.

Type: number
Default: automatic
мин

The minimum value to show on the Y axis. If the minimum data point is less than this value, this setting is ignored, and the chart is adjusted to show the next major tick mark below the minimum data point. This takes precedence over the Y axis minimum determined by scaleType .

This is similar to minValue in core charts.

Type: number
Default: automatic
redColor

The color to use for the red section in HTML color notation.

Type: string
Default: '#DC3912'
redFrom

The lowest value for a range marked by a red color.

Type: number
Default: none
redTo

The highest value for a range marked by a red color.

Type: number
Default: none
ширина

Width of the chart in pixels.

Type: number
Default: Container's width
yellowColor

The color to use for the yellow section in HTML color notation.

Type: string
Default: '#FF9900'
yellowFrom

The lowest value for a range marked by a yellow color.

Type: number
Default: none
yellowTo

The highest value for a range marked by a yellow color.

Type: number
Default: none

Geochart configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
datalessRegionColor

Color to assign to regions with no associated data.

Type: string
Default: '#F5F5F5'
defaultColor

The color to use for data points in a geochart when the location (eg, 'US' ) is present but the value is either null or unspecified. This is distinct from datalessRegionColor , which is the color used when data is missing.

Type: string
Default: '#267114'
displayMode

Which type of geochart this is. The DataTable format must match the value specified. Поддерживаются следующие значения:

  • 'auto' - Choose based on the format of the DataTable.
  • 'regions' - Color the regions on the geochart.
  • 'markers' - Place markers on the regions.
  • 'text' - Label the regions with text from the DataTable.
Type: string
Default: 'auto'
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
область

The area to display on the geochart. Surrounding areas are displayed as well. Can be one of the following:

  • 'world' - A geochart of the entire world.
  • A continent or a sub-continent, specified by its 3-digit code , eg, '011' for Western Africa.
  • A country, specified by its ISO 3166-1 alpha-2 code, eg, 'AU' for Australia.
  • A state in the United States, specified by its ISO 3166-2:US code, eg, 'US-AL' for Alabama. Note that the resolution option must be set to either 'provinces' or 'metros' .
Type: string
Default: 'world'
ширина

Width of the chart in pixels.

Type: number
Default: width of the containing element

Histogram configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object /div>
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval ) and the minimum required space (see hAxis.minorGridlines.minSpacing ).

Type: number
Default: 1
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
histogram.bucketSize

Hardcode the size of each histogram bar, rather than letting it be determined algorithmically.

Type: number
Default: auto
histogram.hideBucketItems

Omit the thin divisions between the blocks of the histogram, making it into a series of solid bars.

Type: boolean
Default: false
histogram.lastBucketPercentile

When calculating the histogram's bucket size, ignore the top and bottom lastBucketPercentile percent. The values are still included in the histogram, but do not affect bucketing.

Type: number
Default: 0
interpolateNulls

Whether to guess the value of missing points. If true , it will guess the value of any missing data based on neighboring points. If false , it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean
Default: false
isStacked

If set to true , stacks the elements for all series at each domain value. Note: In Column , Area , and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (Eg series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

  • false — elements will not stack. This is the default option.
  • true — stacks elements for all series at each domain value.
  • 'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
  • 'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
  • 'absolute' — functions the same as isStacked: true .

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative' , and 0-100% for 'percent' ( Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When с использованием isStacked: 'percent' , be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number , and must have a baseline of zero.

Type: boolean / string
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • color - The color to use for this series. Specify a valid HTML color string.
  • labelInLegend - The description of the series to appear in the chart legend.
  • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.
  • visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
ширина

Width of the chart in pixels.

Type: number
Default: width of the containing element

Line chart configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

  • 'none' - Straight lines without curve.
  • 'function' - The angles of the line will be smoothed.
Type: string
Default: 'none'
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean
Default: false
hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval ) and the minimum required space (see hAxis.minorGridlines.minSpacing ).

Type: number
Default: 1
hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number
Default: automatic
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
interpolateNulls

Whether to guess the value of missing points. If true , it will guess the value of any missing data based on neighboring points. If false , it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number
Default: 2
pointShape

The shape of individual data elements: 'circle' , 'triangle' , 'square' , 'diamond' , 'star' or 'polygon' . See the points documentation for examples.

Type: string
Default: 'circle'
pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline , the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number
Default: 0
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • annotations - An object to be applied to annotations for this series. This can be used to control, for instance, the textStyle for the series:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    See the various annotations options for a more complete list of what can be customized.

  • type - The type of marker for this series. Valid values are 'line', 'area', 'bars', and 'steppedArea'. Note that bars are actually vertical bars (columns). The default value is specified by the chart's seriesType option.
  • color - The color to use for this series. Specify a valid HTML color string.
  • curveType - Overrides the global curveType value for this series.
  • labelInLegend - The description of the series to appear in the chart legend.
  • lineDashStyle - Overrides the global lineDashStyle value for this series.
  • lineWidth - Overrides the global lineWidth value for this series.
  • pointShape - Overrides the global pointShape value for this series.
  • pointSize - Overrides the global pointSize value for this series.
  • pointsVisible - Overrides the global pointsVisible value for this series.
  • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.
  • visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
treatLabelsAsText

If set to true , the chart will treat the column as a text column.

Type: boolean
trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines. n .type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    
Type: object
Default: null
trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string
Default: default series color
trendlines.n.degree

For trendlines of type: 'polynomial' , the degree of the polynomial ( 2 for quadratic, 3 for cubic, and so on).

Type: number
Default: 3
trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string
Default: null
trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number
Default: 2
trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential' , or 'polynomial' .

Type: string
Default: linear
trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean
Default: false
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto

Org chart configuration options

Имя
цвет

The background color of the org chart elements.

Type: string
Default: '#edf7ff'
selectionColor

The background color of selected org chart elements.

Type: string
Default: '#d6e9f8'
размер

The overall size of the chart. Options include 'small' , 'medium' , or 'large' .

Type: string
Default: 'medium'

Pie chart configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
is3D

If true , displays a three-dimensional chart.

Type: boolean
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

If between 0 and 1 , displays a donut chart. The hole has a radius equal to number times the radius of the chart.

Type: number
Default: 0
pieSliceBorderColor

The color of the slice borders. Only applicable when the chart is two-dimensional.

Type: string
Default: 'white'
pieSliceText

The content of the text displayed on the slice. Can be one of the following:

  • 'percentage' - The percentage of the slice size out of the total.
  • 'value' - The quantitative value of the slice.
  • 'label' - The name of the slice.
  • 'none' - No text is displayed.
Type: string
Default: 'percentage'
pieSliceTextStyle

An object that specifies the slice text style. The object has this format:

{color: <string>, fontName: <string>, fontSize: <number>}

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
slices.color

The color to use for this slice.

Type: string
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

Scatter chart configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

  • 'none' - Straight lines without curve.
  • 'function' - The angles of the line will be smoothed.
Type: string
Default: 'none'
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean
Default: false
hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object
Default: null
hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval ) and the minimum required space (see hAxis.minorGridlines.minSpacing ).

Type: number
Default: 1
hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number
Default: automatic
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number
Default: 2
pointShape

The shape of individual data elements: 'circle' , 'triangle' , 'square' , 'diamond' , 'star' or 'polygon' . See the points documentation for examples.

Type: string
Default: 'circle'
pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline , the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number
Default: 0
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • color - The color to use for this series. Specify a valid HTML color string.
  • labelInLegend - The description of the series to appear in the chart legend.
  • lineWidth - Overrides the global lineWidth value for this series.
  • pointShape - Overrides the global pointShape value for this series.
  • pointSize - Overrides the global pointSize value for this series.
  • pointsVisible - Overrides the global pointsVisible value for this series.
  • visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

You can specify either an array of objects, each of which applies to the series in the order given,or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
treatLabelsAsText

If set to true , the chart will treat the column as a text column.

Type: boolean
trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines. n .type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    
Type: object
Default: null
trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string
Default: default series color
trendlines.n.degree

For trendlines of type: 'polynomial' , the degree of the polynomial ( 2 for quadratic, 3 for cubic, and so on).

Type: number
Default: 3
trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string
Default: null
trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number
Default: 2
trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential' , or 'polynomial' .

Type: string
Default: linear
trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean
Default: false
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto

Stepped area chart configuration options

Имя
areaOpacity

The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the series property.

Type: number , 0.0- 1.0
Default: 0.3
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: 'white'
chartArea

An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: object
Default: null
chartArea.backgroundColor
Chart area background color. When a string is used, it can be either a hex string (eg, '#fdc' ) or an English color name. When an object is used, the following properties can be provided:
  • stroke : The color, provided as a hex string or English color name.
  • strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).
Type: string or object
Default: 'white'
chartArea.height

Chart area height.

Type: number or string
Default: auto
chartArea.left

How far to draw the chart from the left border.

Type: number or string
Default: auto
chartArea.top

How far to draw the chart from the top border.

Type: number or string
Default: auto
chartArea.width

Chart area width.

Type: number or string
Default: auto
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type: object
Default: null
hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string
Default: null
hAxis.titleTextStyle

An object that specifies the horizontal axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object
Default: null
hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized' .

Type: number
Default: auto
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
isStacked

If set to true , stacks the elements for all series at each domain value. Note: In Column , Area , and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (Eg series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

  • false — elements will not stack. This is the default option.
  • true — stacks elements for all series at each domain value.
  • 'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
  • 'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
  • 'absolute' — functions the same as isStacked: true .

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative' , and 0-100% for 'percent' ( Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When с использованием isStacked: 'percent' , be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number , and must have a baseline of zero.

Type: boolean / string
Default: false
легенда

An object with members to configure various aspects of the legend. To specify properties of this object, you can use object literal notation, as shown here:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: object
Default: null
legend.position

Position of the legend. Can be one of the following:

  • 'bottom' - Below the chart.
  • 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
  • 'in' - Inside the chart, by the top left corner.
  • 'none' - No legend is displayed.
  • 'right' - To the right of the chart. Incompatible with the vAxes option.
  • 'top' - Above the chart.
Type: string
Default: 'right'
legendTextStyle

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
reverseCategories

If set to true , draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean
Default: false
ряд

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {} . If a series or a value is not specified, the global value will be used. Each object supports the following properties:

  • areaOpacity - Overrides the global areaOpacity for this series.
  • color - The color to use for this series. Specify a valid HTML color string.
  • type - The type of marker for this series. Valid values are 'line', 'area', 'bars', and 'steppedArea'. Note that bars are actually vertical bars (columns). The default value is specified by the chart's seriesType option.
  • labelInLegend - The description of the series to appear in the chart legend.
  • lineDashStyle - Overrides the global lineDashStyle value for this series.
  • targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.
  • visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to.For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Type: Array of objects, or object with nested objects
По умолчанию: {}
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
тема

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

  • 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.
Type: string
Default: null
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
treatLabelsAsText

If set to true , the chart will treat the column as a text column.

Type: boolean
useFirstColumnAsDomain

If set to true , the chart will treat the column as the domain.

Type: boolean
vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis . These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex , then configure the axis using vAxes . The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Type: Array of object, or object with child objects
Default: null
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1 , which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.logScale

If true , makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0 . The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number
Default: 1
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out' , 'in' , 'none' .

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.title

Specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
ширина

Width of the chart in pixels.

Type: number
Default: width of the containing element

Table chart configuration options

Имя
alternatingRowStyle

Determines if an alternating color style will be assigned to odd and even rows.

Type: boolean
Default: true
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
страница

If and how to enable paging through the data. Choose one of the following string values:

  • 'enable' - The table will include page-forward and page-back buttons. Clicking on these buttons will perform the paging operation and change the displayed page. You might want to also set the pageSize option.
  • 'event' - The table will include page-forward and page-back buttons, but clicking them will trigger a 'page' event and will not change the displayed page. This option should be used when the code implements its own page turning logic. See the TableQueryWrapper example for an example of how to handle paging events manually.
  • 'disable' - [ Default ] Paging is not supported.
  • Type: string
    Default: 'disable'
pageSize

The number of rows in each page, when paging is enabled with the page option.

Type: number
Default: 10
showRowNumber

If set to true , shows the row number as the first column of the table.

Type: boolean
Default: false
сортировать

If and how to sort columns when the user clicks a column heading. If sorting is enabled, consider setting the sortAscending and sortColumn properties as well. Choose one of the following string values:

  • 'enable' - [ Default ] Users can click on column headers to sort by the clicked column. When users click on the column header, the rows are automatically sorted, and a 'sort' event is triggered.
  • 'event' - When users click on the column header, a 'sort' event is triggered, but the rows aren't automatically sorted. This option should be used when the page implements its own sort. See the TableQueryWrapper example for an example of how to handle sorting events manually.
  • 'disable' - Clicking a column header has no effect.
Type: string
Default: 'enable'
sortAscending

The order in which the initial sort column is sorted. True for ascending, false for descending. Ignored if sortColumn is not specified.

Type: boolean
Default: true
sortColumn

An index of a column in the data table, by which the table is initially sorted. The column is marked with a small arrow indicating the sort order.

Type: number
Default: -1
ширина

Width of the chart in pixels.

Type: number
Default: width of the containing element

Timeline configuration options

Имя
backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties.

Type: string or object
Default: 'white'
цвета

The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] .

Type: Array of strings
Default: default colors
высота

Height of the chart in pixels.

Type: number
Default: height of the containing element
ширина

Width of the chart in pixels.

Type: number
Default: width of the containing element

Tree map configuration options

Имя
headerColor

The color of the header section for each node. Specify an HTML color value.

Type: string
Default: #988f86
maxColor

The color for a rectangle with a column 3 value of maxColorValue . Specify an HTML color value.

Type: string
Default: #00dd00
maxDepth

The maximum number of node levels to show in the current view. Levels are flattened into the current plane. If your tree has more levels than this, you must go up or down to see them. You can additionally see maxPostDepth levels below this as shaded rectangles within these nodes.

Type: number
Default: 1
maxPostDepth

How many levels of nodes beyond maxDepth to show in "hinted" fashion. Hinted nodes are shown as shaded rectangles within a node that is within the maxDepth limit.

Type: number
Default: 0
midColor

The color for a rectangle with a column 3 value midway between maxColorValue and minColorValue . Specify an HTML color value.

Type: string
Default: #000000
minColor

The color for a rectangle with the column 3 value of minColorValue . Specify an HTML color value.

Type: string
Default: #dd0000
noColor

The color to use for a rectangle when a node has no value for column 3, and that node is a leaf (or contains only leaves). Specify an HTML color value.

Type: string
Default: #000000
субтитры

Text to display below the chart title.

Type: string
Default: no title
subtitleTextStyle

An object that specifies the title text style.

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
textStyle

An object that specifies the title text style. The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize.

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
заголовок

Text to display above the chart.

Type: string
Default: no title
titleTextStyle

An object that specifies the title text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}