how to dynamically change chart type in highstock stock chart?

Question

I want to change my chart type dynamically in highstock stock chart.

Basically, I want to change the ohlc chart type to line, area, spline, areaspline, column , bar candlestick etc. I am doing this by adding an external drop down and based on the value selected in the drop down, i am changing the series type to their respective values, but there is a problem here.

The data format for ohlc and candlestick is different than it is for others, so even though the chart is rendering as line, area etc, the values are not correct.

Is there a way to add other chart types without changing data format, or if I have to change the data format, please tell me how to change xaxis also, as other data formats require external xaxis to be mentioned.

Thanks for the help.

Could you reproduce your chart in an online code editor like jsfiddle? What exactly do you mean by the values are not correct? Could you describe how it should look like? — Wojciech Chmiel

Hien Nguyen Hien Nguyen · Accepted Answer · 2019-04-28T16:17:34

You can set options.chart.type = 'column'; //chart type

 options.chart.renderTo = 'container';
 options.chart.type = 'column';
 var chart1 = new Highcharts.Chart(options);

If you want to change xAxis and data format you need update the options variable

$(function () {    


// Create the chart

var options = {
    chart: {
       events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this;

                        

                    // Show the loading label
                    chart.showLoading('Loading ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000); 
                }

            }
        },
        plotBorderWidth: 0
    },

    title: {
        text: 'Change chart type',
    },
    //
    subtitle: {
            text: 'Subtitle'
    },
    //
    xAxis: {
            type: 'category',
    },
    //
    yAxis: {

            title: {
                margin: 10,
                text: 'No. of user'
            },      
    },
    //
    legend: {
        enabled: true,
    },
    //
    plotOptions: {
        series: {
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        },
        pie: {
            plotBorderWidth: 0,
            allowPointSelect: true,
            cursor: 'pointer',
            size: '100%',
            dataLabels: {
                enabled: true,
                format: '{point.name}: <b>{point.y}</b>'
            }
        }
    },
    //
     series: [{
        name: 'Case',
        colorByPoint: true,
        data: [3, 2, 1, 3, 4]
    }],
    //
    drilldown: {
        series: []
    }
};

// Column chart
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);

chartfunc = function()
{
var column = document.getElementById('column');
var bar = document.getElementById('bar');
var pie = document.getElementById('pie');
var line = document.getElementById('line');

        
if(column.checked)
    {
        
        options.chart.renderTo = 'container';
        options.chart.type = 'column';
        var chart1 = new Highcharts.Chart(options);
    }
else if(bar.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'bar';
        var chart1 = new Highcharts.Chart(options);
    }
else if(pie.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'pie';
        var chart1 = new Highcharts.Chart(options);
    }
else
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'line';
        var chart1 = new Highcharts.Chart(options);
    }

}

$('#change_chart_title').click(function(){
   
    var chart = $('#container').highcharts();
        
    //alert('Chart title changed to '+new_title+' !');
    
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<input type="radio" name="mychart" class="mychart" id= "column" value="column" onclick= "chartfunc()" checked>Column
<input type="radio" name="mychart" class="mychart" id= "bar" value="bar" onclick= "chartfunc()">Bar
<input type="radio" name="mychart" class="mychart" id= "pie" value="pie" onclick= "chartfunc()">Pie
<input type="radio" name="mychart" class="mychart" id= "line" value="line" onclick= "chartfunc()">Line
<br />

<input type="button" id="change_chart_title" value="Change">  

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

how to dynamically change chart type in highstock stock chart?

1 Answers