Skip to content

H08: Create chart with separate axes and custom svg elements #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dqmrf wants to merge 5 commits into
base: main
Choose a base branch
from
Open

H08: Create chart with separate axes and custom svg elements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1e2cd93
H08: Create chart with separate axes and custom svg elements
dqmrf Jun 25, 2026
ae26c68
H08: Refactor all
dqmrf Jun 26, 2026
e94e244
H08: Refactor all
dqmrf Jun 26, 2026
dc8693a
Merge branch 'highcharts/08-separate-axes' of https://github.com/blac…
dqmrf Jun 26, 2026
49537d3
H08: Remove old main.js file
dqmrf Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion highcharts-api/highcharts/08-separate-axes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<!doctype html>

<head>
<title>Separate Axes</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>

<body>
Expand Down
158 changes: 158 additions & 0 deletions highcharts-api/highcharts/08-separate-axes/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
const categories = [ 'Dep1', 'Dep2', 'Dep3', 'Dep4', 'Dep5' ];
const yAxisMax = 100;
const axisWidth = 45;

const chartEvents = {
load: function() {
const chart = this;

chart.customAxisLabels = [
{ text: 'Manegrial Position', axis: 0 },
{ text: 'Non Manegrial Position', axis: 1 },
];

chart.customBarLabels = categories.map(c => ({ text: c }));
},

render: function() {
const chart = this;
const {
renderer, customAxisLabels, customBarLabels, plotLeft, plotTop, plotWidth
} = chart;

// Create bar labels
chart.series[0].points.forEach((point, i) => {
const { shapeArgs } = point;
const l = customBarLabels[i];
const x = plotLeft + plotWidth / 2;
const y = shapeArgs.x + plotTop + shapeArgs.width / 2;

if (!l.element) {
l.element = renderer.label(l.text, 0, 0)
.css({
color: 'gray',
'font-size': '12px'
})
.add();
}

l.element.attr({
x: x - l.element.width / 2,
y: y - l.element.height / 2
});
});

// Create axis labels
customAxisLabels.forEach(l => {
if (!l.element) {
l.element = renderer.label(l.text, 0, 0)
.css({
'font-size': '12px',
'font-weight': 'bold',
})
.add();
}

const rightOffsetX = l.axis ? (100 - axisWidth) : 0;
const midX = plotLeft + (plotWidth * (rightOffsetX + axisWidth / 2) / 100);

const x = midX - l.element.width / 2,
y = 3;

l.element.attr({ x, y });
});
},

destroy: function() {
this.customAxisLabels?.forEach(l => l.element?.destroy());
this.customBarLabels?.forEach(l => l.element?.destroy());
}
};

Highcharts.chart('container', {
chart: {
type: 'bar',
events: chartEvents,
marginTop: 36
},
title: false,
yAxis: [{
width: `${axisWidth}%`,
max: yAxisMax,
reversed: true,
title: { text: null }
}, {
width: `${axisWidth}%`,
left: `${100 - axisWidth}%`,
offset: 0,
max: yAxisMax,
title: { text: null }
}],
xAxis: {
visible: false,
reversed: false,
categories
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 0,
grouping: false,
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
series: [{
yAxis: 0,
name: 'Manegrial Background',
data: Array(categories.length).fill(yAxisMax),
color: 'lightgray',
enableMouseTracking: false,
states: { hover: { enabled: false } }
}, {
yAxis: 0,
name: 'Manegrial Position',
data: [80, 16, 96, 60, 72],
color: 'red',
dataLabels: {
enabled: true,
inside: true,
align: 'right',
format: '{y} %',
x: -4,
style: {
color: 'black'
}
}
}, {
yAxis: 1,
name: 'Non Manegrial Background',
data: Array(categories.length).fill(yAxisMax),
color: 'lightgray',
enableMouseTracking: false,
states: { hover: { enabled: false } }
Comment on lines +140 to +141

@ddragula ddragula Jun 29, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to disable hover state if you also disable mouse tracking.

@dqmrf dqmrf Jun 29, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense.

}, {
yAxis: 1,
name: 'Non Manegrial Position',
data: [21, 6, 9, 50, 81],
color: 'red',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{y} %',
x: 4,
style: {
color: 'black'
}
}
}]
});