Three Line Break

by cristiscu

HTML

<link href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.logAxisRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasOverlay.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.highlighter.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.cursor.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.trendline.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.ohlcRenderer.js" type="text/javascript"></script>

<div...

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('http://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
.jqplot-title { font-weight: bold }
.jqplot-xaxis { color: #cacaca; }
.jqplot-yaxis { color: #707073; }
.jqplot-xaxis-label { color: #000000; }
.jqplot-yaxis-label { color: #000000; }

JavaScript

$(function () {
    
    var options = {
        seriesColors: ["#007c9c", "#019fcc", "#8fcd3e", "#82b93a", "#638a2d"],
        animate: (!$.jqplot.use_excanvas && true),
        title: {
            text: "Line Break with Candlestick",
            fontFamily: "Arial", fontSize: "12px", fontWeight: "bold", textColor: "#000000",
        },
        legend: {
            show: false,
        },
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        },
        axes: {
            xaxis: {
                label: "year",
                labelOptions: { fontFamily: "Arial", fontSize: "8px", fontWeight: "bold", textColor: "#000000", },
                borderColor: "#000000",
                rendererOptions: {
                    drawBaseline: true, baselineWidth: 1, baselineColor: "#cacaca",
                },
                showTicks: true,
                showTickMarks: true,
                showMinorTicks: true,
                tickOptions: {
                    show: true,
                    showGridline: false,
                    isMinorTick: false,
                    markSize: 0,
                    mark: "outside",
                    fontFamily: "Arial", fontSize: "7px", textColor: "#000000",
                },
            },
            yaxis: { 
                label: "price",
                labelOptions: { fontFamily: "Arial", fontSize: "8px", fontWeight: "bold", textColor: "#000000", },
                borderColor: "#000000",
                rendererOptions: {
                    drawBaseline: false, baselineWidth: 0,
                },
                showTicks: true,
                showTickMarks: true,
                showMinorTicks: true,
                tickOptions: {
                    show: true,
                    showGridline: true,
                    isMinorTick: false,
                    markSize: 0,
                    mark: "outside",
       ...