function main_chart(id,data,title,color) {

    if(!color) color='dodgerblue';

    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        },
        credits: false,
        tooltip: {
            tooltip: { enabled: false },
        },

    });

    Highcharts.chart(id, {
        chart: {
            type: 'bar',
            margin: [20,20,35,65],
            style: {
                fontFamily: 'Poppins'
            },
            backgroundColor: 'ghostwhite',
        },

        events: {
      load() {
        const chart = this;
        chart.showLoading('Simulating Ajax ...');
        setTimeout(function() {
          chart.hideLoading();
          chart.series[0].setData([1, 2, 3, 4, 5])
        }, 3000);
      }
    },

        tooltip: {
            tooltip: { enabled: false },
        },

        title: {
            text: '',
            exporting:{
                chartOptions:{
                    title: {
                        text:title,
                        x: -20
                    }
                }
            },
        },

        lang: {
            noData: "<i class='fa fa-exclamation-triangle fa-lg text-warning'></i> Posts have dwindled, try a different time frame"
        },
        noData: {
            useHTML: true,
            style: {
                fontWeight: 'bold',
                fontSize: '20px',
                color: color,
                fontFamily: 'Poppins'
            }
        },

        xAxis: {

            type: "category",
            labels: {
                style: {
                    color: color,
                    fontSize: '14px',
                    fontWeight: 'bold'
                }
            },

        },
        yAxis: {
            min: 0,
            tickInterval: 1,
            endOnTick: false,
            title: {
                text: ''
            },
            labels: {

                format: '{value:,.0f}',
                style: {
                    color: 'darkorange',
                    fontSize: '13px',
                }
            },
            stackLabels: {
                enabled: true,
                format: '{total}',
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
        },
         plotOptions: {
            pointPadding: 0.01,
            bar: {
                pointPadding: 0,
                pointWidth:50,
                dataLabels: {
                    enabled:true,
                    align: 'right',
                    inside: true,
                    color:'white',
                    style: {
                        textOutline: 0
                    }
                }
            },
            series: {
                dataLabels: {
                    enabled: true
                },
                cursor: 'pointer',
                borderRadius: 5,
                point: {
                    events: {
                        click: function() {
                          if(showlog) showlog(this.category);
                        }
                    }
                },
                states: {
                    hover: {
                        enabled: false
                    },
                    inactive: {
                        opacity: 1,
                    },
                },
            }
        },
        series: [
            {
                showInLegend: false,
                color: color,
                dataLabels: {
                    enabled: false,
                    align: 'left',
                    format: '{x}',
                    style: {
                        fontSize: '20px',
                        fontWeight: 'bold',
                        padding: '10px'
                    },
                }
            },


        ],
        data: {
            enablePolling: false,
            csv: data
        }
    
    },function(c) {
    
    Highcharts.addEvent(c.xAxis[0].labelGroup.element, 'click', e => {
        e = c.pointer.normalize(e);
        let index = Math.round(c.xAxis[0].toValue(e.chartX));
        alert(index + '\t' + c.xAxis[0].categories[index])
    });

});

}

function pie_chart(id,data,title,image) {

    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        },
        credits: false,
        tooltip: {
            tooltip: { enabled: false },
        },

    });

    Highcharts.chart(id, {
        chart: {
            type: 'pie',
            backgroundColor: 'ghostwhite',
            margin: [0,0,0,0],
            style: {
                fontFamily: 'Poppins'
            },
            events: {
      load: function() { 
        let innerSize = this.userOptions.plotOptions.pie.innerSize;
        this.renderer.image('img/'+image,
          this.chartWidth / 2 - innerSize / 2,
          this.plotTop + this.plotSizeY / 2 - innerSize / 2,
          innerSize,
          innerSize).add();
      }
    },
        },

        title: {
        text: '',
        align: 'center',
        verticalAlign: 'bottom',
        margin: -50,
        floating: true,
        style: {
          fontSize: '25px',
          fontWeight: 'bold',
          fontStyle: 'none',
          fontFamily: 'Poppins'
        }
      },

        plotOptions: {
            pie: {
                size:'80%',
                innerSize: 100,
                dataLabels: {
                    color: 'dodgerblue',
                    style: {
                        textOutline: false,
                        fontSize: '20px',
                        fontWeight: 'bold',
                    }
                }
            }
        },

        series: [{
            data: data
        }]
    });


}