highcharts
For categorical data type and comparison objective, allow categories and series exchangeable, and allow set yAxis for categories.
Description of the feature
1. Exchangeable between categories and series, make categories a individual config option as same as series.
For categorical data type and comparison objective, categories can become to series, and series and become to categories, like column to row or vice versa in Excel. Consider categories and series are two sides of right angle ruler, they can be exchanged/transposed/switched/transformed/rotated.
For example, the chart in your-first-chart use fruits as categories, use person names as series:
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
Person names can also be categories, and fruits can also be series.
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Jane', 'John']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Apples',
data: [1, 5]
}, {
name: 'Bananas',
data: [0, 7]
}, {
name: 'Oranges',
data: [4, 3]
}]
});
});
Since they can be exchanged at design time, it would be nice to exchange them at runtime, something like chart:{exchangeCategoriesAndSeries: true}, something like chart.inverted but it's for data.
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'bar',
exchangeCategoriesAndSeries: true // Do column row transformation when this is set to true.
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: categoriesSeries
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
categoriesSeries: [{
name: 'Jane',
}, {
name: 'John',
}],
series: [{
name: 'Apples',
data: [1, 5]
}, {
name: 'Bananas',
data: [0, 7]
}, {
name: 'Oranges',
data: [4, 3]
}]
});
});
Also, make categories an individual config option as same as series, so that it can config other options (say yAxis) for it.
2. yAxis for categories
I have a same requirement like this one: Different yaxis for different categories in x-axis.
If categories and series can be exchangeable at runtime, it would be reasonable to allow set yAxis for categories.
...
xAxis: {
categories: categoriesSeries
},
yAxis: [{
title: {
text: 'CM'
}
}, {
title: {
text: 'KG'
}
}, {
title: {
text: 'KCal'
}
}, {
title: {
text: 'mmol/L'
}
}],
// Each category use an individual yAxis
categoriesSeries: [{
name: 'Height',
yAxis: 0
}, {
name: 'Weight',
yAxis: 1
}, {
name: 'Calories',
yAxis: 2
}, {
name: 'Blood Sugar',
yAxis: 3
}],
// Each series covers all categories which use different yAxis
series: [{
name: 'Jane',
data: [170, 65, 1800, 5.4]
}, {
name: 'John',
data: [181, 87, 2600, 7.3]
}]
...
It will be very useful for spider-web chart when each category need an individual yAxis.
Library related to the feature
Highcharts
Proof of Concept/Live example for the feature
You can vote for this feature by adding a thumbs-up reaction to this post.
Hello @moontide, thanks for the suggestion!
What you can do on your end right now, is to parse the data, so that the format resembles the highcharts data structure. For more help, please reach out to us via our available support channels https://www.highcharts.com/blog/support/
In the data module we have data.switchRowsAndColumns which may be what you are looking for.
We should also mention the chart.inverted property that allows flipping the chart in run time.
In the data module we have data.switchRowsAndColumns which may be what you are looking for.
Yes, that is almost what I'm looking for, except for the 'individual config option for categories' part.
Sorry I didn't notice there's dedicated data option. I came from zkcharts which is java wrapper of Highcharts, and it seems zkcharts doesn't cover all options of Highcharts: there's no option for data in zkcharts.
I guess I have to find a way to use pure Highcharts instead of zkcharts.
'yAxis for categories' still remains as a feature request.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!
No you're not closing it.