Wie kann ich ein 2-Achsen-Highchart responsive machen? ⇐ JavaScript

[Anonymous]

Der Designer hat dieses Balkendiagramm mit einer gemeinsamen vertikalen Achse und zwei verschiedenen horizontalen Achsen erstellt und diese nebeneinander platziert. Ich muss Mobilgeräte unterstützen und das funktioniert bei einem schmalen Ansichtsfenster nicht.Ich kann das mit zwei Diagrammen machen und CSS verwenden, um die zweite vertikale Achse auf großen Bildschirmen auszublenden und sie dann zu stapeln, um die Achse für kleine anzuzeigen – aber dann kann ich keinen gemeinsamen Tooltip erstellen, der die Werte aus beiden Diagrammen enthält.
Gibt es eine Möglichkeit, dies innerhalb von Highcharts mit Responsive zu tun?

Code: Select all

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],

}
],

});

Code: Select all

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;
}

Code: Select all

Hier ist die jsfiddle