Как я могу сделать 2-осевую диаграмму отзывчивой? ⇐ Javascript

[Anonymous]

Дизайнер создал эту гистограмму с общей вертикальной осью и двумя разными горизонтальными осями и разместил их рядом. Мне нужно поддерживать мобильные устройства, и это не работает в узкой области просмотра.Я могу сделать это с двумя диаграммами и использовать CSS, чтобы скрыть вторую вертикальную ось на больших экранах, а затем сложить их вместе, отображая ось для маленьких - но тогда я не могу создать общую подсказку, содержащую значения из обеих диаграмм.
Есть ли способ сделать это в высоких диаграммах с помощью адаптивного интерфейса?

Код: Выделить всё

Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['entity 1', 'entity 2','entity3','entity4','entity 5'],
labels: {

style: {
color: 'black',
fontFamily: 'var(--sans)',
fontSize: '.85rem',
fontWeight: '500'
},
},

},
yAxis: [{
width: '45%',
min:0,
max:275,

title: {
enabled: true,
text: 'VALUE',

},

}, {
width: '45%',
left: '50%',
min:0,
max:80,
title: {
enabled: true,
text: 'COST IN MILLIONS OF DOLLARS'
},
labels: {
align: 'left',
y: -21,
format:'${value}M',
}
}],

legend: {
enabled: false
},
credits: {
enabled: false
},

plotOptions: {
series: {
//           pointPadding:5,
//         borderWidth: 1,

},
},

tooltip: {
shared: true,
useHTML: true,
formatter: function() {

var chart = this.points && this.points[0] && this.points[0].series.chart;
var hoverSeries = chart && chart.hoverSeries;
var hoveredYear = hoverSeries && hoverSeries.options && hoverSeries.options.year ? hoverSeries.options.year : (this.points && this.points[0] && this.points[0].series.options.year);

// Filter the points to only include those that belong to the hovered year
var pts = this.points.filter(function(p) {
return p.series.options && p.series.options.year == hoveredYear;
});

var s = '' + this.x + ': ' + hoveredYear + '[/b]';[b]            pts.forEach(function(p) {
// If the series is plotted on yAxis 1 it's dollar amounts (millions)
if (p.series.options && p.series.options.yAxis == 1) {
// Format to one decimal place for millions
var val = typeof Highcharts !== 'undefined' ? Highcharts.numberFormat(p.y, 1) : p.y;
s += '
' + p.series.name + ':$' + val + 'M[/b]';[b]                } else {

var val2 = typeof Highcharts !== 'undefined' ? Highcharts.numberFormat(p.y, 0) : p.y;
s += '
' + val2 + ' Number[/b]';
}
});
return s;
}
},

series: [{
yAxis: 0,
color: 'blue',
year: '2024',
name: '2024',
data: [223, 190, 260, 124, 136],

},
{
yAxis: 0,
color: 'green',
year: '2025',
name: '2025',
data: [230, 240, 264, 128, 136],

},
{
yAxis: 1,
color: 'blue',
year: '2024',
name: '2024',
data: [77.3, .251, 48.2, 19.6, 28.6],

},

{
yAxis: 1,
color: 'green',
year: '2025',
name: '2025',
data: [79.3, .271, 49.1, 20.2, 28.9],

}
],

});

Код: Выделить всё

body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
background: var(--highcharts-background-color);
color: var(--highcharts-neutral-color-100);
}

.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}

#container {
height: 400px;
}

.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}

.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: var(--highcharts-neutral-color-60, #666);
}

.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
background: var(--highcharts-neutral-color-3, #f7f7f7);
}

.highcharts-description {
margin: 0.3rem 10px;
}

Код: Выделить всё

Вот jsfiddle

Подробнее здесь: https://stackoverflow.com/questions/798 ... responsive