CODEWITHSUNDEEP
javascripthighcharts
DHari
DHari

Reputation: 11

Highcharts - Is it possible to customize the bars in column range type?

I would like to generate a report using highcharts with extjs. I have tried out the sample http://jsfiddle.net/6qsvjark/2/. 

series: [{
        name: 'Data',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8.1,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]

Is it possible to customize the size/shape (eg.,rounded edges) of bars in columnrange type of highcharts? Also, is it possible to place a symbol between 2 data in series? Please refer the image

symbol between two data (with same 'x' point) in a series enter image description here

Upvotes: 1

Views: 503

Answers (1)

Vladimir M
Vladimir M

Reputation: 4489

You can do quite a bit of customization to highcharts. However achieving these effects often means somewhat pushing the limit of what different customization options were meant to be used for and adding some hard-codded items, hence making your chart less portable for different sizes. It will probably cost some extra time and effort to make it work well.

As a starting point you can use the following sample:

http://jsfiddle.net/c96qy0qa/

Here I use borderRadius to round the corners, and custom label for the 3rd (middle) series to display an icon in between other two series. Also I use series shown in the middle to overlap the other two, in order to hide the rouded corners in the middle.

            series: [{
            name: 'Male',
            borderRadius:20,
            data: [-2.2, -2.2]
        },{
            name: 'Female',
            borderRadius:20,
            data: [2.1, 3.0 ]
        }, {
            name: 'blah',
            borderWidth:30,
            borderRadius:10,
            borderColor:"#ffffff",
            dataLabels:{
               enabled:true,
               useHTML:true,
               crop:false,
               formatter:function(){ return "<img  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwJCBoDRV/pcAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABkklEQVRo3u1aQRKDMAgsTI4+xP+/xod4p6fOdNqoARZInXpsY8jCAhsTEpHHHR5+3OS5DZB29ifttKENyiJrBBA6ypEIEJHAyqlFO20Ip7VZON4Do4kWZ3PZC06dI55Je07w0ufKsUNAvCCQxeRo/ksgIwY9NLQA6tlrlSB671sjZe4jEcXAQ2GubIYem5/j+RdB9JopZxuPyEPaafvKEe0CrbliAXD2DlfQCN1DhoGgKhSisR79zt6JRxaniYIsslocx9GejpA3vXGM4qiX+176ckQya9RByA4Rpa1GooOWOGylwmwfIDh7MVE7T/YY1i4qsh+5k12zOIQ+O5oDUrWywEyltaw952p8eGdHABoZ0zIXfjafR8vJImuLBiGLrBbg2obKkbx+GRuRIlppo6YW6ruTJzrQ/QiqFGsio6Li+54d6f3MSH9FJFNyoG2li8YoW2UnVpo9vEn9ao4FPB0d7ZiG9iyyKqnEaPWpLqwKok+sqooHae+izHqJgCuMhmx/UbeDMlVBKJDq53/NabbnCakwWb7DRriDAAAAAElFTkSuQmCC'>"; },
               x:0
            },
            data: [0.3, 0.3]
        }]

Upvotes: 2

Related Questions