Remove the option to enable hidden graph(X button ) in Amchart

Question

I'm trying to enable and disable a graph from my code. I don't want the user to enable the hidden graphs from the UI using the cross button displayed against the hidden graphs in Amchart. How to remove the cross button when the graph is hidden from code ? For the sake of demo I have hidden the graph on render to display the cross button. Here is a DEMO.

Here is the code:

var chartData1 = [];
var chartData2 = [];

generateChartData();

function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;

        chartData1.push({
            date: newDate,
            value: a1
        });
        chartData2.push({
            date: newDate,
            value: a2
        });
    }
}

AmCharts.makeChart("chartdiv", {
    type: "stock",
  listeners: [{
      event: "rendered",
      method: hide
  }],
    dataSets: [{
            title: "first data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value"
            }],
            dataProvider: chartData1,
            categoryField: "date"
        },

        {
            title: "second data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value2"
            }],
            dataProvider: chartData2,
            categoryField: "date",
            compared: true
        }
    ],

    panels: [{

            showCategoryAxis: false,
            title: "Data set #1",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true
            }],

            stockLegend: {

            }
        }, {

            showCategoryAxis: true,
            title: "Data set #2",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g2",
                valueField: "value2",
                compareField: "value2",
                comparable: true,
                visibleInLegend: false
            }],

            stockLegend: {

            }
        }
    ],

    chartScrollbarSettings: {
        graph: "g1"
    },

    chartCursorSettings: {
        valueBalloonsEnabled: true,
        fullWidth:true,
        cursorAlpha:0.1
    },

    periodSelector: {
        periods: [{
            period: "MM",
            selected: true,
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    }
});



function hide(chart){
  chart.chart.panels[0].graphs[0].hidden = true;
}

Answer 1

Set visibleInLegend and compareGraphVisibleInLegend to false in the stock graph object you want to hide. The former works on the main dataset while the latter works on a compared dataset (Dataset 2 in your case).

        stockGraphs: [{
            id: "g1",
            valueField: "value",
            comparable: true,
            visibleInLegend: false,
            compareGraphVisibleInLegend: false //takes affect when dataset 1 becomes a compared dataset rather than the main one
        }],

Updated codepen