A customized column and x-series ranged chart

[BVS]

I'm trying to build a chart using Highcharts which has a customized behavior as shown/attached as an image.

I tried to achieve this with a Columnrange type and x-series charts attached the inprogress fiddles for the same at the link https://jsfiddle.net/58xgpd1L/3/ and https://jsfiddle.net/6mae35x8/1/ I think data inputs should look something like below for achieving attached highchart expectation:

Code: Select all

series: [{
        name: 'Temperatures',
        data: [
            ['Black', 88, 60],
            ['Blue', 22 - 58, 60],
            ["Yellow", 32, (-22) - 154],
            ['Orange', -18, 60],
            ["Green", 54, (-22) - 154],
            ["Gray",  121 - 143, 60]
        ]
    }]

Could someone suggest if this kind of highchart can be achieved via highcharts? in which based on the inputs there would be below category of line.

• Horizontal lines from start of index on Y-Axis till the end of X-Axis width(60) in this case
  
  Vertical lines from start of index on X-Axis till the end of Y-Axis(200) for instance.
  
  Range from min(20) to max(50) on Y-Axis spans till the end of X-Axis width(60) with background color.

Please do advise if this can be achieved with any of Highcharts

[bastss]

Hi BVS,

I cannot see any image and I'm not really sure what you want to achieve. Could you send this image one more time?

Best regards!

[BVS]

Hi BVS,

I cannot see any image and I'm not really sure what you want to achieve. Could you send this image one more time?

Best regards!

Hi bastss,

Please find the Attached sample envisioned chart attached to the query

[rafalS]

Hi, BVS!

Of course, the chart from your image can be built pretty easy using Highcharts.

Here I have created a very similar example for you: https://jsfiddle.net/BlackLabel/pkdLrotn/
You can find all the used properties here in our API: https://api.highcharts.com/highcharts/

Feel free to ask if you have any questions about your chart.

Best regards!

[BVS]

Thanks rafalS, for your help! I see the fiddle has black, green and yellow lines plotted in xAxis and yAxis - plotLines Properties but my expectation all these values to be inputted as part of series-data property itself as shown below more over the bars representing varies in size depending on the range of temperature for instance -22 to 150 which would fully occupy the graph, by the way can we shown the title on each representation in addition to identifying it by color.

Please let me know if we can achieve above 3 requests, Thanks in Advance!

Code: Select all

series: [{
        name: 'Temperatures',
        data: [
            ['Black', 88, 60],
            ['Blue', 22 - 58, 60],
            ["Yellow", 32, (-22) - 154],
            ['Orange', -18, 60],
            ["Green", 54, (-22) - 154],
            ["Gray",  121 - 143, 60]
        ]
    }]

[rafalS]

BVS,

you can display dataLabels showing title at every point (in this case color):

Code: Select all

plotOptions: {
  	series: {
    	dataLabels: {
      	enabled: true,
        formatter() {
          return this.color
        }
      }
    }
  },

Referring to your series data - you can't feed Highcharts with data you described. Creating lines from -22 to 154 height also is not a good idea using this series. It can be done using pointWidth like the red line in this fiddle: https://jsfiddle.net/wab4j9ng/, but it will be hard to automate the calculations.