score:1
Accepted answer
First of all, you need to convert your data to a readable format for Highcharts.
API: https://api.highcharts.com/highmaps/series.map.data
For example, create separate arrays for each year:
let data2015 = [
['py-ag', 10, 20, 30],
['py-bq', 40, 50, 60]
];
let data2016 = [
['py-ag', 15, 25, 35],
['py-bq', 45, 55, 65]
];
The additional data needs to be connected to the chart, by the series.keys
:
API: https://api.highcharts.com/highcharts/plotOptions.series.keys
plotOptions: {
series: {
keys: ['hc-key', 'total', 'hombre', 'mujer']
}
Then, you can easily refer to this data in the tooltip.formatter
API: https://api.highcharts.com/highcharts/tooltip.formatter
tooltip: {
formatter: function() {
let point = this.point;
return '<b>' + point.name + '</b><br>' + 'Total: ' + point.options.total + '<br>' + 'Hombre: ' + point.options.hombre + '<br>' + 'Mujer: ' + point.options.mujer
}
}
For updating data by drop-down list use series.update
method:
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
document.getElementById('select').onchange = function() {
let option = this.value;
if (option === 'data2015') {
chart.series[0].update({
data: data2015,
name: '2015'
});
}
if (option === 'data2016') {
chart.series[0].update({
data: data2016,
name: '2016'
});
}
};
Source: stackoverflow.com
Related Query
- Highmaps js, on Hover display additional data
- Highcharts display label for pie chart using html table as data source
- highcharts highmaps parsing json data to display world map with rich info
- Include additional highcharts source data in angular2 app
- Set Additional Data to highcharts series
- Add additional data to a Highcharts series for use in formatters
- Always display data labels above columns in HighCharts
- How to display No Data Available Message in highcharts
- Highcharts doesn't display series with lots of data points
- How to display highchart y axis with constistant data
- Add additional data to Pie Tooltip on Highcharts
- Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart
- Add additional data to point using DotNet.Highcharts
- Highcharts - Global configuration with common code and unique data & Headings
- Django - can't get highchart to display data
- Expose additional data based on xAxis element click - Highcharts.js
- Highcharts shows data but can't display chart
- Using Highcharts display donut hightchart having dynamic data
- Highcharts Custom display of tooltips, based on data series values
- Displaying Points And Drilldown Data in Highmaps
- Highstock tooltip Formatter not able to display extra data
- Display blank space if data is not present for a particular date
- highcharts show additional custom data in tooltip
- Highchart - Display JSON Data - MYSQL / PHP
- Highcharts won't display data
- how to display 2 same highcharts without duplicate the code
- Setting additional point attributes in HighStock time series with large data sets
- Highcharts Scatter Chart Data Point Hover
- Highmaps : Custom data label on world map
- angularjs and highcharts, labels not shown unless I hover over the data points
More Query from same tag
- HighCharts/Highstock: How to programmatically draw the mouse line
- alternative way to change hovered series and its points properties in a HighCharts chart
- Highcharts Synchronized charts with missing data points
- How to display custom or non-series data array on Highcharts tooltip on hover?
- highchart not displaying bars chart while printing
- Highcharts inactive state must be applied to all items except for hovered item
- Multiline Highchart based on Dates
- Unable to access UserMin/UserMax in eventObject of click event in RangeSelector in Highcharts
- How can I display crosshair labels on top of the chart with Highcharts
- HighChart / HighStock chart.refresh seems to fail to reload the chart
- Render title with dynamic html in highcharts
- PhantomJS PDF DPI scaling issues
- Set a Different Color Per Region/Province in a Country
- How to know information about the clicked bar in highchart column r shiny plot
- Highcharts: Cannot read property 'chart' of undefined
- HIGHCHARTS Areaspline Dynamic data graph gives poor result
- Is it possible to plot more than 35000 points in Highcharts
- Highchart display of more than 1 series is not showing
- Plotbands in the Highcharts .net wrapper do not show
- How to Get element properties from Highchart
- rCharts highlight charts in shiny not working
- HighCharts Solid Gauge Chart not displaying ticks
- change the legend.y property on browser resize
- How can I replace the last datapoint in HighStock/HighCharts?
- Rendering Artifacts in Stacked Area Chart with Gaps
- Highcharts overlay multiple datetime series
- How to make a good structure of array in Yii2?
- Override Highcharts waterfall isSum() value
- Highstock change xAxis minRange after chart is loaded
- "Extend" highcharts chart add properties and functions, prototype