How to style two different legends in HighCharts

Question

I have a problem with styling two different symbols of the legend in the HighCharts. Maybe someone know how to write my code correctly, or have some ideas for my problem. I also need to write it without jquery.

Thanks and have a good day! I need to style them like in a picture

My code now if looking like :

 const dataX = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6];
    const dataXY = [27.0,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9, 9.6];
    let maxX = dataX.reduce((max, val) => (max > val ? max : val), dataX[0]);
    let minX = dataX.reduce((max, val) => (max < val ? max : val), dataX[0]);
    let minXY = dataXY.reduce((max, val) => (max < val ? max : val), dataXY[0]);
    let maxXY = dataX.reduce((max, val) => (max > val ? max : val), dataXY[0]);
    proxy(FL_BEST_TIME_BIG, container => {
      Highcharts.chart(container, {
        chart: {
          scrollablePlotArea: {
            minWidth: window.innerWidth < 767 ? 767 : null,
            scrollPositionX: 0,
            marginTop: 20
          },
          spacingBottom: 100
        },
        credits: {
          enabled: false
        },
        subtitle: {
          text: null
        },
        xAxis: [
          {
            endOnTick: true,
            startOnTick: true,
            gridLineColor: "#EDEDED",
            min: 0,
            labels: {
              format: "{value}",
              style: {
                color: "#8F969A",
                fontSize: 11,
                fontFamily: "Roboto"
              }
            },
            categories: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec"
            ]
          }
        ],
        yAxis: [
          {
            title: {
              text: ""
            },
            // Primary yAxis
            labels: {
              enabled: false
            }
          },
          {
            // Secondary yAxis
            title: {
              text: null,
              style: {
                color: Highcharts.getOptions().colors[0]
              }
            },

            labels: {
              format: "{value} грн",
              style: {
                color: "#8F969A",
                fontSize: 11,
                fontFamily: "Roboto"
              },
              enabled: window.innerWidth > 767 ? true : false
            },
            opposite: true
          }
        ],
        labels: {
          items: [
            {
              html: "Цена",
              style: {
                top: "50px",
                left: "60px",
                fontWeight: "bold",
                color: "#292C2E",
                fontSize: "16px",
                fontFamily: "Roboto"
              }
            },

            {
              html: minX + " - " + maxX + " грн",
              style: {
                top: "70px",
                left: "20px",
                fontWeight: "bold",
                color: "#292C2E",
                fontSize: "14px",
                fontFamily: "Roboto"
              }
            },
            {
              html: "Tемпература",
              style: {
                top: "50px",
                left: "180px",
                fontWeight: "bold",
                color: "#292C2E",
                fontSize: "16px",
                fontFamily: "Roboto"
              }
            },
            {
              html: minXY + " - " + maxXY + " °C",
              style: {
                top: "70px",
                left: "180px",
                fontWeight: "bold",
                color: "#292C2E",
                fontSize: "14px",
                fontFamily: "Roboto"
              }
            }
          ]
        },
        legend: {
          align: "left",
          itemDistance: 62,
          squareSymbol: false,
          alignColumns: false,
          itemHoverStyle: {
            color: "#292C2E"
          },
          itemStyle: {
            fontFamily: "Roboto",
            fontWeight: "bold",
            fontSize: 16,
            color: "#292C2E"
          }
        },
        plotOptions: {
          column: {
            animation: false,
            dataLabels: {
              enabled: false
            },
            states: {
              inactive: {
                opacity: 1
              },
              hover: {
                enabled: false //disable changibg backgcol by hover
              }
            },
            borderRadiusTopLeft: 5,
            borderRadiusTopRight: 5,
            groupPadding: 0.01,
            pointPadding: 0
          },
          series: {
            lineWidth: 4,
            marker: {
              lineWidth: 0, //here
              lineColor: null, // inherit from series
              fillColor: null,
              enabled: false,
              states: {
                hover: {
                  enabled: true
                }
              }
            },
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            name: "", //hover
            type: "column",
            yAxis: 1,
            color: "#28B2FF",
            hover: {
              enabled: false
            },
            data: dataX,
            tooltip: {
              valueSuffix: " грн"
            }
          },
          {
            name: "", //hover TEMP
            type: "spline",
            color: "#FFBD46",
            pointStart: 0,
            hover: {
              enabled: false
            },
            data: dataXY,
            tooltip: {
              valueSuffix: "°C"
            }
          }
        ]
      });
    });
  }

Answer 1

Please notice that labels.items feature is deprecated, so it is not recommended to use it. https://api.highcharts.com/highcharts/labels.items

So, first, I think that it is better to keep the wanted name in the series object because it will be rendered in the legend group and will keep hide/show functionalities.

I mean:

{
  name: "Tемпература", //hover TEMP
  type: "spline",
  color: "#FFBD46",
  pointStart: 0,
  hover: {
    enabled: false
  },
  data: dataXY,
  tooltip: {
    valueSuffix: "°C"
  }
}

Next - I notice that column series legend symbol is rendered as a circle. To avoid it create an empty series and in the column series use the linkedTo feature to attach it to the previous one.

 series: [{
      name: "Цена"
    },
    {
      linkedTo: ":previous",
      name: "Цена", //hover
      type: "column",
      yAxis: 1,
      color: "#28B2FF",
      hover: {
        enabled: false
      },
      data: dataX,
      tooltip: {
        valueSuffix: " грн"
      }
    },

I created also a custom function inside the render feature which will be positioning the legend name and creating the bottom label.

See demo: https://jsfiddle.net/BlackLabel/mx6snvqr/

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

API: https://api.highcharts.com/highcharts/series.line.linkedTo