highcharts jquery dynamic change chart type column to bar
highcharts, jquery
Solution
You can use inverted parameter in chart and update yAxis. http://jsfiddle.net/n9xkR/8/
$('#bar').click(function () {
chart.inverted = true;
chart.xAxis[0].update({}, false);
chart.yAxis[0].update({}, false);
chart.series[0].update({
type: 'column'
});
});
Problem
I'm trying to switch of graph type using jquery. I found the way to change dinamically the chart type (without recreating a new chart) by using the function : series[i].update({ type: chartType}); My first question will be : There is a way to change the all chart and not just the series ? If not keep reading :) But with this function i'm not able to make the 'bar' chart working. It's acting like a column chart. As you can see the pie example is working as excepted. bar : http://www.highcharts.com/demo/bar-basic How it works(sample example) : ``` <div id="top10_" style="float:left"> <button id="set_column">column</button> <button id="set_bar">bar</button> <button id="set_pie">pie</button> </div> <div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div> ``` ``` $('#set_column').click(function () { var chart = $(this).parent('div').attr('id'); chart = chart.replace('_', ''); $('#' + chart).highcharts().series[0].update({ type: "column" }); }); $('#set_bar').click(function () { var chart = $(this).parent('div').attr('id'); chart = chart.replace('_', ''); $('#' + chart).highcharts().series[0].update({ type: "bar" }); }); $('#set_pie').click(function () { var chart = $(this).parent('div').attr('id'); chart = chart.replace('_', ''); $('#' + chart).highcharts().series[0].update({ type: "pie" }); }); ``` Highcharts creation : ``` $('#top10').highcharts({ chart: { type: 'column', margin: [50, 50, 100, 80] }, title: { text: 'TOP10' }, subtitle: { text: ' ' }, credits: { enabled: false }, xAxis: { categories: ['1', '2', '3', '4'], labels: { rotation: -45, align: 'right', style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: 'Ilość' } }, legend: { enabled: false }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + 'Ilość: ' + this.y; } }, series: [{ name: 'Ilość zgłoszeń, TOP10', data: [1, 2, 3, 43], dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', x: 4, y: 10, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }] }); ``` Here is a fiddle example : http://jsfiddle.net/supergg/zqvNq/4/ Thanks,