Jump Line charts in High Charts

Question

I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution? How can I integrate jump line chart with column chart using high charts ?

This is what I need to make ...

Combo Chart

Here's the code I am using

 Highcharts.chart("container", { title: { text: "Combination chart" }, plotOptions: { column: { borderRadius: 5 }, series: { marker: { enabled: false } } }, xAxis: { categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"] }, labels: { items: [ { // html: 'Total fruit consumption', style: { left: "50px", top: "18px", color: // theme (Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) || "black" } } ] }, series: [ { // max:0, pointWidth: 7, type: "column", name: "TP", lineWidth: 8, data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55] }, { type: "column", name: "1S", pointWidth: 7, data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100], // yAxis: 1 }, { type: "column", name: "1A", pointWidth: 7, data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100], // yAxis: 1 }, { type: "line", name: "LYTP", data: [10,10,null,80,80,null,90,90,null,103,103], // dashStyle: "longdash", marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[1], fillColor: "lightblue" } }, { // type: 'pie', // name: 'Total consumption', center: [100, 80], size: 100, showInLegend: false, dataLabels: { enabled: false } } ] });

 .highcharts-strong { font-weight: bold; } .highcharts-figure, .highcharts-data-table table { min-width: 320px; max-width: 600px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #EBEBEB; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/timeline.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container"></div> <p class="highcharts-description"> Timeline charts are used to place events on a time axis, such as this example showing the major space exploration events from 1951 to 1975. </p> </figure>

Answer 1

There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:

(function(H) {
    H.seriesType('jump-line', 'column', {
        height: 6
    }, {
        translate: function() {
            H.seriesTypes.column.prototype.translate.apply(this);

            this.points.forEach(function(point) {
                point.shapeArgs.height = this.options.height;
            }, this);
        }
    });
}(Highcharts));

Highcharts.chart('container', {
    ...,
    series: [..., {
        type: 'jump-line',
        pointPadding: 0,
        grouping: false,
        data: [4, 4, 4]
    }]
});

---

Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/

API Reference:

https://api.highcharts.com/class-reference/Highcharts#.seriesType

https://www.highcharts.com/docs/extending-highcharts/extending-highcharts