CODEWITHSUNDEEP
highcharts
Ripper346
Ripper346

Reputation: 752

Show only one border of one bar in highcharts

I have to build a horizontal bar chart with highcharts with also some lines to indicate the minimum and maximum values that aren't the same for each bar.

The best way I imagined to do is to put a series with a transparent bar and do the border right colored but I can't figure out how to do it. So far I did a bar with all the borders and then put over another bar without borders and white. However this solution hides the vertical grid and that's not what I want.

Here is an image of the objective. I am searching a way to do the red and green lines. chart

The settings for that chart is

var options = {
    "chart": {"type": "column", "inverted": true, "polar": false},
    "title": {"text": ""},
    "subtitle": {"text": ""},
    "series": [{
        "name": "maximum",
        "turboThreshold": 0,
        "pointWidth": 70,
        "color": "rgba(255, 255, 255, 1)",
        "colorByPoint": false,
        "borderWidth": "10",
        "borderColor": "#b71c1c",
        "colorIndex": 0,
        "fillColor": ""
    }, {
        "name": "maximum2",
        "turboThreshold": 0,
        "pointWidth": 80,
        "lineColor": null,
        "color": "#ffffff",
        "borderColor": "#eceff1",
        "borderWidth": "0",
        "zThreshold": 0,
        "type": "",
        "shape": "",
        "shadow": false
    }, {
        "name": "minimum",
        "turboThreshold": 0,
        "pointWidth": 70,
        "color": "#bbdefb",
        "borderColor": "#1b5e20",
        "borderWidth": "10"
    }, {
        "name": "minimum2",
        "turboThreshold": 0,
        "pointWidth": 80,
        "color": "#ffffff",
        "zThreshold": 0
    }, {"name": "avg", "turboThreshold": 0, "pointWidth": 50, "color": "#bbdefb"}, {
        "name": "best",
        "turboThreshold": 0,
        "pointWidth": 50,
        "color": "#64b5f6"
    }, {"name": "mine", "turboThreshold": 0, "pointWidth": 25, "color": "#0d47a1"}],
    "plotOptions": {"column": {"groupPadding": 0.5, "pointPadding": 0.1}},
    "data": {
        "csv": "\"series\";\"maximum\";\"maximum2\";\"minimum\";\"minimum2\";\"avg\";\"best\";\"mine\"\n\"series1\";8;8;1;1;4.9;2;5\n\"series2\";5;5;1;1;3;1;2\n\"series3\";10;10;1;1;5;2;3",
        "googleSpreadsheetKey": false,
        "googleSpreadsheetWorksheet": false
    },
    "yAxis": [{}],
    "pane": {"background": []},
    "responsive": {"rules": []}
};
new Highcharts.Chart("highcharts-e3896764-618b-48e8-9545-031ab2433d34", options);

and the live https://jsfiddle.net/ryu3L09e

Does anyone have a solution? Maybe set the right border so I don't have to do two series or change a "z-index" like to move the white and bordered series in the background before the grid. Thank you

Upvotes: 1

Views: 1201

Answers (2)

ppotaczek
ppotaczek

Reputation: 39069

You can also add predefined marker symbol and use scatter series type:

Highcharts.SVGRenderer.prototype.symbols.rectangle = function(x, y, w, h) {
    return [
        'M', x - w, y,
        'L', x + w * 2, y,
        x + w * 2, y + h,
        x - w, y + h,
        'Z'
    ];
}

Live demo: http://jsfiddle.net/BlackLabel/5dg412hz/

Or use build-in bullet chart type: https://www.highcharts.com/docs/chart-and-series-types/bullet-chart

Upvotes: 2

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

One hacky way is to use a columnrange series instead to indicate the min/max.

With the following modifications, I've made and example:

  • Added Highcharts-more module:

    <script src="https://code.highcharts.com/highcharts-more.js"></script>

  • Removed series minimum2 and maximum2

  • Added the following to minimum and maximum series:

    minPointLength: 1,
grouping: false,
type: "columnrange"

Upvotes: 1

Related Questions