Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 400px"></div>

JavaScript

var renderer;

var dashStyles = [
    'Solid',
    'ShortDash',
    'ShortDot',
    'ShortDashDot',
    'ShortDashDotDot',
    'Dot',
    'Dash',
    'LongDash',
    'DashDot',
    'LongDashDot',
    'LongDashDotDot'
];

renderer = new Highcharts.Renderer(
    $('#container')[0],
    400,
    400
);

$.each(dashStyles, function (i, dashStyle) {
    renderer.text(dashStyle, 10, 30 * i + 20)
        .add();

    renderer.path(['M', 10, 30 * i + 23, 'L', 390, 30 * i + 23])
        .attr({
            'stroke-width': 2,
            stroke: 'black',
            dashstyle: dashStyle
        })
        .add();
});