Привет. Итак, что делаем:

1. Кликаем на виджет столбчатой диаграммы и идём в оформление. Там сразу в самый низ, в раздел Общие, включаем ползунок «Разрешить редактирование кода».

2. Переходим в код виджета и в самом верху добавляем строку:

w.plotOptions.series.dataLabels.useHTML = true;

Эта строка включает для всех серий (series) использование HTML-разметки при отображении подписей данных (dataLabels). Скоро объясню, зачем это нужно.

3. Настраиваем ось Y: Задаём целочисленный шаг сетки с логарифмической шкалой. Это визуально вытянет сетку по вертикали — фактических изменений не будет, но смотреться будет удобнее.

4. Переходим в настройку серий: У каждой серии копируем Hex-код цвета.

5. Идём в раздел Подписи → Подписи точек/столбцов: Включаем параметр «Разрешить перекрытие подписей» — он облегчит или затруднит дальнейшую работу в зависимости от ваших данных.

Далее нам нужно заполнить поле «Форматирование подписей точек/столбцов» — именно туда мы будем вставлять нужный тернарный оператор на js.

▎Что такое тернарный оператор?

Тернарный оператор — это условное выражение, записываемое в формате: условие ? значение_если_истина : значение_если_ложь

Если условие выполняется — возвращается первое значение, иначе — второе.

Пример: x === 5 ? y = 1 : y = 0

(Если x равно 5, то y присваивается 1, иначе — 0.)

▎Что мы хотим сделать?

Особенность нашего тернарного оператора — он будет состоять из двух условий, одно вложено в другое.

• Для делений с минимальными значениями y (например, меньше 6) числовая величина выносится вправо от столбца и помещается в рамку цвета данного деления.

• Для делений со значениями больше 5, но меньше 15 — выносится влево от столбца.

Включение HTML-разметки позволит нам использовать в рамках оператора различные оформления и украшательства.

А дальше остаётся только написать сам оператор.

На связи.