line chart main asset classes

line chart main asset classes

by pj_js15

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div style='min-width: 1000px'>
        <div class='boxesContainer'>
            <div class='box seven'>Very high</div>
            <div class='box six'>High</div>
            <div class='box five'>Medium to high</div>
            <div class='box four'>Medium</div>
            <div class='box three'>Low to medium</div>
            <div class='box two'>Low</div>
            <div class='box one'>Very low</div>
        </div>
        <div class='canvasContainer'>
            <canvas id="canvas" width="300"></canvas>
        </div>
    </div>

CSS

canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        width: 100%;
    }
        .canvasContainer{
            float: left;
            width: 845px;
            height: 300px;
            position: relative;
            /*top: -300px;
            left: 75px;
            */
            top: -10px;
            left: -75px;
        }
        .boxesContainer{
            float: left;
            height: 300px;
            width: 150px;
        }
        .box{
            color: #FFF;
            padding: 10px 5px;
            font-size: 15px;
            font-weight: bold;
            font-family: Arial, sans-serif;
            height: 40px;
            vertical-align: top;
            text-align: left;
        }
        .seven{ background-color: #B11280; }
        .six{ background-color: #F4A000; }
        .five{ background-color: #95C11F; }
        .four{ background-color: #99D0BC; }
        .three{ background-color: #009FE3; }
        .two{ background-color: #006EB8; }
        .one{ background-color: #004289; }

JavaScript

var config = {
            type: 'line',
            data: {
                labels: ['', '', '', '', '', '', '', '', '', ''],
                datasets: [{
                    label: "My First dataset",
                    data: [null, 15, null, 75, 112, 155, 205, 260, 320],
                    //data: [null, 15, null, 75, 105, 135, 165, 195, 225],
                    fill: false
                }]
            },
            options: {
                responsive: true,
                spanGaps: true,                
                title:{
                    display:false
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: false,                        
                        scaleLabel: {
                            display: false,
                            labelString: 'Month'
                        },
                        scaleSteps: 10
                    }],
                    yAxes: [{
                        display: false,                        
                        scaleLabel: {
                            display: false,
                            labelString: 'Value'
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 250,
                        }
                    }]
                }
            }
        };

        config.data.datasets[0].borderColor = '#333';
        config.data.datasets[0].pointBorderWidth = 1;
        config.data.datasets[0].pointRadius = 10;
        config.data.datasets[0].pointBackgroundColor = ['', '#004289', '','#006EB8', '#009FE3', '#99D0BC', '#95C11F', '#F4A000', '#B11280']
        
       ...