score:1
You can achieve this using drilldown/up events, and a custom name per series, like this:
The drillevents:
chart: {
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({text: e.seriesOptions.customName})
}, drillup: function(e) {
this.xAxis[0].setTitle({text: e.seriesOptions.customName})
}, drillupall: function() {
this.xAxis[0].setTitle({text: 'TextTopLevel'})
}
}
},
The series:
{
id: 'fruits',
customName: 'Custom title goes here',
data: [
['Apples', 4],
['Oranges', 2]
]
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({text: e.seriesOptions.customName})
}, drillup: function(e) {
this.xAxis[0].setTitle({text: e.seriesOptions.customName})
}, drillupall: function() {
this.xAxis[0].setTitle({text: 'TextTopLevel'})
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category',
title: {
text: 'Categories'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
customName: 'test1',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
customName: 'test2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
customName: 'test3',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
JSFiddle working example: http://jsfiddle.net/ewolden/p8vfy27h/
Source: stackoverflow.com
Related Query
- Highcharts Drilldown Setting XAxis title differently
- Change title when drilldown in Highcharts
- Highcharts chart with 'datetime' xAxis - use categories on drilldown
- display content on highcharts Xaxis and Yaxis title in form of subscript and superscript
- Highcharts xAxis drilldown dont change correctly
- Highcharts xAxis shows labels from drilldown on drillup
- Drilldown and title update in Highcharts pie
- Change xAxis and yAxis title of drilldown chart after entering into second series
- Different xAxis label, max and colors for drilldown in Highcharts
- setting highcharts title in a modal
- Increase width of Xaxis title in bar chart in highcharts
- Setting dates in the xAxis properly HighCharts
- Highcharts - setting the yAxis title dynamically
- How to let x axis title still show on the bottom when setting fontsize attribute in Highcharts
- Programmatically change a chart title in highcharts
- Change HighCharts axis title
- HighCharts show datetime format on xAxis
- Highcharts - remove times between dates on a datetime xaxis type
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Optimize JavaScript DrillDown code
- HighCharts - show last labels in xAxis
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Lazy Highcharts drilldown
- Highcharts Pie Chart Drilldown not showing on third drill
- highcharts : set title on exporting
- How to add image in Highcharts Title and subtitle
- Highcharts Legend Title Horizontal Align
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
More Query from same tag
- Reusing highchart chart many times on the same page by changing parse string
- Displaying small values using highcharts.js
- Populate the chart with values returned by controller
- High and low line on candlestick chart
- How to make Javascript output brackets for an Array of Arrays. (For Highcharts)
- data in x-axis in highcharts with 15mins timeblock
- Generate javascript and html blocks on the fly
- Highcharts padding issue
- Plotting time series with different scales with Hichcharts
- Overriding log scale with highcharts export server
- Highcharts Heatmap xAxis tick alignment
- Fixed Datalabel dimensions in Highcharts Series DataLabels
- HighChart xAxis and data discrepancy
- HighCharts long title text overlapping on some elements
- How do I rotate my HighCharts bar chart so its vertical, not horizontal?
- JSON data not showing in highstock candlestick chart using PHP and SQL
- jQuery datepicker with Highstocks / Highcharts
- Viewing IP in highcharts
- How to disable interaction animations on line chart but keep tooltips?
- How to call User Control from one of the Javascript function?
- How to hide "showInLegend" of Highcharts in angular 8.1?
- Tooltip in Scatter
- Wrong x-dots in Highcharts
- Hiding a Highcharts series without using the legend
- how to change the position of HighCharts.js scatterplot marker position
- Highcharts shared tooltip for line series and scatter plot not working
- Highcarts custom legend
- HighCharter HCAES method not producing any visualization in R Shiny Dashboard
- Highchart container does hold inner div
- Formatting the year in highcharts