score:3
After some researchs and based on the comment above from @Sebastian here is the conclusion:
You can modify your Data
by adding the index to match the xAxis like Data[[Index,from,to],[SecondIndex,from,to]
etc... and when it comes to the negative values you can set Data Data[[IndexForNegative,from,to],[IndexForNegative,from,to]...
for the same value.
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange'
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
negativeColor: 'red',
threshold: 0,
dataLabels: {
enabled: true,
formatter: function() {
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[0,0,9.4],
[1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index
[2,-3.5,0],[1,0,9.4],
[3,-1.4,0],[2,0,19.9],
[4,0.0],[4,0,22.6],
[5,2.9, 29.5],
[6,9.2, 30.7],
[7,7.3, 26.5],
[8,4.4, 18.0],
[9,-3.1,0],[9,0,11.4],
[10,-5.2,0],[10,0,10.4],
[11,-13.5,0],[11,0,9.8]
]
}]
});
});
Source: stackoverflow.com
Related Query
- Highcharts column range change color for negative numbers
- column chart color range for negative numbers and different color range for positive
- Change Highcharts column color for different parties
- Highcharts - change background color along specific date range
- Highcharts Change column color on hover
- Highcharts - Column With Negative Values - Column Color
- Highcharts - change color of only clicked column
- Highcharts change the line color if its out of the area range
- Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values
- How to change color of bar in column chart with different level of percentage in highcharts
- Highcharts (JavaScript): Change color of column if condition is met
- HighCharts negative color for dataLabels
- Is is possible to change line color in highchart xy plot for specific y range only?
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- Highcharts Highmaps How to change value for color axis in map bubble
- set the background color for column group graphs in highcharts
- How to change color of single column in Highcharts column graph when data is in CSV form?
- Highcharts change or add color for name in a array of point.names and y
- React Highcharts change border color on selected column from local state
- Highcharts - Change column color If data.point equal to string
- after using for loop all my column graphs are plotted in single color i need each bar in different color in highcharts
- Set a minimal default range for a column chart in Highcharts
- Highcharts - Providing different range value in positive and negative side for Y-axis
- Highcharts - Column Chart: Compare corresponding values to change color
- Change graph color above and below plot-line in Column chart in Highcharts
- How to create a column range chart in Highcharts using range and navigator functions?
- How do you change the colour of each category within a highcharts column chart?
- set different colors for each column in highcharts
- Highcharts : Change opacity of a column chart
- How to change the text color in Highcharts
More Query from same tag
- Production build issue with ChartModule in angular 2
- Switching between many Highcharts using buttons or link text
- Highcharts: Dynamically update export filename
- How to show relation between two boxes containing same data in two different treemaps
- highcharts stockchart 1m and 3m not enabled
- How to format datetime for (x,y) pair data for Highcharts
- Negative color with area color fill and yAxis
- Force Highcharts to use standalone framework instead of jquery?
- Highcharts PieChart Legend paging faulty
- How to IF value in Highchart label
- css file from highcharts is missing from highcharts site. need link to new css file
- HighStock/HighCharts add point from JSON dynamically to series (events)
- Behavior of multiple HighCharts on single page when removing one div
- Dynamic highcharts pie chart with drilldown
- min-height to chart container if no data with highcharts.js
- How Can I show a percentage of the value on the graph?
- Display HighStock y-axis and its labels on the right of the series
- Shared legend of charts in react-highcharts?
- How to use image on label depending on data?
- Highcharts - Column labels with different widths are not aligned
- my first highchart
- How can I hide ALL series with the same ID with a button on highcharts? (line graph)
- Creating negative stacking bar chart with Highcharter(Likert chart)
- How to replicate what Excel does to plot a "Scatter with smooth lines" graph
- OnClick() with Highcharts in MVC 4
- How to load data from JSON to Highchart?
- How can I have both a legend and data labels, with different labels, in Highcharts?
- How can I ensure my Highcharts don't break my flexbox layout?
- Highchart maps show some states as selected with feasibility to select other states
- Highchart live data gauge