Highcharts

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1 style="color:red" align="center">WELCOME TO LINE CHARTS</h1>


<div id="container" name="container"></div>


<script>
Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Multi Salesmen GP Amount'
    },
    subtitle: {
        text: ''
    },
    xAxis: [{
        categories: ['Budiman', 'Anto', 'Agus', 'Beduk','Amir','Andi','Santo','Dewi','Wati','Sule','Parto','Danang'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        min :0,
        max:100,
        labels: {
            format: '{value}%',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Average GP %',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        min:0,
        max:2000,
        title: {
            text: 'Nominal',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} Juta',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    },{
        min:0,
      max:2000,
      gridLineWidth: 0,
        title: {
            text: 'Target GP',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value} Juta',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
      opposite:true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 20,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
     plotOptions: {
       column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'January',
        type: 'column',
        yAxis: 1,
        data: [400, 400, 400, 400, 400, 400, 400, 300, 400, 500, 100, 200],
        tooltip: {
            valueSuffix: ' JUTA'
        }

    },{
        name: 'Februari',
        type: 'column',
        yAxis: 1,
        data: [400, 400, 400, 400, 400, 400, 300, 500, 600, 700, 600, 500],
        tooltip: {
            valueSuffix: ' JUTA'
        }

    },{
        name: 'Maret',
        type: 'column',
        yAxis: 1,
        data: [200, 200, 200, 200, 200, 200, 100, 300, 400, 500, 100, 200],
        tooltip: {
            valueSuffix: ' JUTA'
        }

    },{
        name: 'April',
        type: 'column',
        yAxis: 1,
        data: [200, 200, 200, 200, 200, 200, 100, 300, 400, 500, 100, 200],
        tooltip: {
            valueSuffix: ' JUTA'
        }

    }
    ,{
        name: 'Traget GP',
        type: 'spline',
        yAxis: 2,
        data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
        marker: {
            enabled: false
        },
        dashStyle: 'shortdot',
        tooltip: {
            valueSuffix: ''
        }

    }, {
        name: 'Average GP %',
        type: 'spline',
        data: [40,43,41,44,44,45,47,48,50,51,53,52],
        tooltip: {
            valueSuffix: 'Percentage'
        }
    }]
});


</script>