score:4
there are two ways of doing those changes - a static and dynamic way. static way - define data labels and tooltip options for drilldown series.
dynamic way - apply the options on drilldown/drillup events.
events: {
drilldown: function(options) {
this.yaxis[0].update({
labels: {
format: '{value}'
}
}, false, false);
options.seriesoptions.datalabels = {
format: '{point.y:.1f}'
};
options.seriesoptions.tooltip = {
pointformat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
drillup: function () {
this.yaxis[0].update({
labels: {
format: '{value}%'
}
}, false, false);
}
}
example: http://jsfiddle.net/d4fmaeea/
two warnings:
in your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.
$.getjson()
is an asynchronous function. you use getjson to assignlist
tooptions.series
but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.
async part of code:
$.getjson('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getjson('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new highcharts.chart(options);
});
Source: stackoverflow.com
Related Query
- Changing yAxis and plotOptions for drilldown
- Highcharts - where to place style and changing style for one wedge in a pie chart
- highcharts and different yAxis for different categories
- Change xAxis and yAxis title of drilldown chart after entering into second series
- Different xAxis label, max and colors for drilldown in Highcharts
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- Two DataSeries for yAxis 1 and 2 with Data from SQLdb
- Create new value in legend for 2nd and 3rd drilldown
- Ugly Highchart when using letter label for both xaxis and yaxis
- Need help in simplifying the code to synchronise tooltips and crosshairs for Highcharts,
- Highcharts Legend titles changing after drilldown and back?
- Highcharts histogram drilldown: set options for drilldown + first and last column cut-off
- When there is a plotband and a plotline emerging from yAxis how to set a particular width for plotband only in highchart
- HighChart response for time on yaxis and text on xaxis
- Reset yAxis Min and Max on drilldown
- Showing all values on one point on x axis and changing range for rCharts highcharts
- Highchart: Making a single series scrollable and changing x-axis variable upon drilldown
- highchart with drilldown where data for main chart and drilled down chart are from different xml files
- Changing data dynamically for a series in Highcharts
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Optimize JavaScript DrillDown code
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Highchart/stock tooltip formatter for both series and flags
- Plotting seconds, minutes and hours on the yAxis with Highcharts
- Possible to use xAxis with type "datetime" and yAxis with categories?
- Remove space between yAxis and data in highcharts
- Highcharts - yAxis logarithmic scale and allowDecimals set to false not seeming to have any effect
- Highcharts: Is it possible to have separate plotOptions for each series?
- display content on highcharts Xaxis and Yaxis title in form of subscript and superscript
- Decimal values for yAxis categories in Highcharts
More Query from same tag
- Highcharts jQuery rendering problem - all browsers
- javascript and highcharts was not getting in ajax response
- How to get total of highcharts multiple series
- R Highcharter: Different display and value for clicked category
- Highcharts not rendering with array loaded with ajax
- High Charts: Change each individual plot/marker size, is it possible?
- Setting additional point attributes in HighStock time series with large data sets
- HighCharts SyntaxError: missing ] after element list
- Use the "step" label option in Highcharts, starting at the end of the xaxis
- Highcharts displaying white space for bars when all values are zero
- Cannot read property 'forExport' of undefined when leaving the page with Hicharts chart
- Does HighCharts have a fundamental minimum height before it's rendering behaviour changes?
- Resize highcharts using react-grid-layout not working
- Highcharts: Tooltip on a single series only
- How can I highlight every data point in Highcharts fixed width container?
- Changing the color of the point dynamically in highcharts
- Highcharts steps to setup own server for download
- remove inline styles from svg in highcharts
- How to disable tooltips for the highcharts-regression plugin?
- show tooltip for each point of highcharts network graph in Angular
- Highcharts - shared tooltips for certain serieses
- What is the simple way to hide series data in HighStocks Navigator
- Highcharts - Synchronized heat maps
- Highcharts creates same text 3 times
- Change hcharts( ) bars from solid-colored to gradient
- Create Highchart from the Following Data
- Is it possible to load csv data to Highstock chart?
- Draw a vertical line when clicking on the series in highcharts.
- Why does my HighStock data drop off when I zoom out?
- Charts rendered using highcharts in angular2 do not take the height of the parent