Mix Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<div style="position:relative;width:100%;height:500px;"><canvas id="mixchart_1"></canvas></div>
		    <script>

		    document.addEventListener("DOMContentLoaded", function(){

		        new Chart(
		            document.getElementById("mixchart_1"),
		            {
		                data: {

		                    labels: ["January","February","March","April"],

		                    datasets: [

		                        {
		                            type: "bar",
		                            label: "Sales",
		                            data: [10,20,30,40],
		                            borderColor: "rgb(255, 99, 132)",
		                            backgroundColor: "rgba(63, 107, 194, 0.2)",
		                            borderWidth: 1
		                        },

		                        {
		                            type: "line",
		                            label: "Target",
		                            data: [50,50,50,50],
		                            fill: false,
		                            borderColor: "rgb(54, 162, 235)",
		                            tension: 0.3
		                        }

		                    ]

		                },

		                options: {
		                    responsive: true,
    						maintainAspectRatio: false
		                }
		            }
		        );

		    });

		    </script>

[skillwrapper type="skt_mixchart" heading_one="Sales" heading_two="Target" backgroundcolor_bar="#3f6bc2dd" bordercolor_bar="#FF6384" bordercolor_line="#36A2EB"]

[skill title="January" value1="10" value2="50"]

[skill title="February" value1="20" value2="50"]

[skill title="March" value1="30" value2="50"]

[skill title="April" value1="40" value2="50"]

[/skillwrapper]