score:1
That is no problem at all, only issue is columns being offcenter due to empty values in one series. (We need two series for legends) It can be solved adding offset values to xAxis.
let rawData = [
{
month: 1,
costOfRepair: 200,
lessThanLastYear: true
},
{
month: 2,
costOfRepair: 300,
lessThanLastYear: true
},
{
month: 3,
costOfRepair: 3800,
lessThanLastYear: false
},
{
month: 4,
costOfRepair: 2000,
lessThanLastYear: true
},
{
month: 5,
costOfRepair: 4000,
lessThanLastYear: false
},
{
month: 6,
costOfRepair: 2500,
lessThanLastYear: false
},
{
month: 7,
costOfRepair: 100,
lessThanLastYear: false
},
{
month: 8,
costOfRepair: 4500,
lessThanLastYear: false
},
{
month: 9,
costOfRepair: 4000,
lessThanLastYear: false
},
{
month: 10,
costOfRepair: 2000,
lessThanLastYear: false
},
{
month: 11,
costOfRepair: 5800,
lessThanLastYear: false
},
{
month: 12,
costOfRepair: 2500,
lessThanLastYear: false
},
]
function processRawData(lessThanLastYear) {
let data = []
rawData.forEach(dataPoint => {
if(dataPoint.lessThanLastYear === lessThanLastYear){
data.push({
x: dataPoint.lessThanLastYear === true ? dataPoint.month + 0.15 : dataPoint.month - 0.15,
y: dataPoint.costOfRepair,
})
}
})
return data
}
Highcharts.chart('container', {
series: [
{
name: 'Cost (>= Previous Year)',
type: 'column',
color: 'red',
data: processRawData(true)
},
{
name: 'Cost (<= Previous Year)',
type: 'column',
color: 'green',
data: processRawData(false)
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Source: stackoverflow.com
Related Query
- Is it possible to create a chart which has conditional coloring and also shows up in legend?
- is it possible to create Highchart polar chart which has x-axis at center rather than at circumference
- Is it possible create a Highstock chart using TWO PANES and MULTIPLE SERIES in a pane
- How to create a column range chart in Highcharts using range and navigator functions?
- How to create a new Highstock chart with new Highchart and not jquery?
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Can we create pie chart and scatter plot combined using highcharts.js?
- Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?
- How to create chart with highchart in which bar doesn't start from 0 in y axis?
- How to draw a bar chart that one series has both positive and negative values in Highcharts?
- How to create pie chart with only 1 series data and have background be a circle
- Is it possible to create a bubble polar chart with Highcharts?
- Unable to Create Chart in Highcharts and id is undefined
- Highstock.js: Not able to create multi pane chart with two stacked column charts, one "normal" and the other "percent"
- Highcharts - column chart has space between bar and xAxis
- How to change the series color and mark after I draw the line chart in highcharts?Does it has databound event?
- Highchart how to create lollipop type chart with circle and line top/bottom at different positions
- Highcharts.js question: is it possible to add blank space from the left and right side of chart that will be visible only during panning?
- Highcharts: closest point on chart gets highlights and shows tooltip instead of the point where mouse in pointing
- Highcharts xrange chart is not respecting datetime xAxis min and max values - shows space on both sides
- Possible to create a dual y axis chart but where the secondary y series is using a secondary x axis?
- How to create a chart with X and Y as strings?
- high chart with large variates data and dynamically create y axis
- Is is possible to create a grouped bar chart in HighChartJS?
- Column Chart with condition-based coloring in R and highcharts
- Is it possible with Chart js or which chart Library can provide this type of chart?
- how create chart with highcharts.js and call ajax?
- Highcharts create legend for waterwall and stack column chart
- Is it possible to create a multi level (stacked) donut chart with variable diameter on the last stack
- Highcharts: How to create Pie-Donut Chart with 1 slice to have 1 layer and other slices to have 2 layers
More Query from same tag
- Strange behavior with highcharts when using "column" type and multiple datetime series
- Highcharts - Cannot display data labels on a spline chart
- PhoneGap and Highcharts
- Add Sub categories to y axis on highcharts
- HighStock charts - Change default Open Price to Close Price
- Get TypeError: Cannot read properties of undefined (reading 'forEach') when pass a params
- Highcharts Sync charts vertically
- How to set brightness effects on specific columns on the stacked column/bar chart when using Highcharts?
- how to sync height & y-axis baseline of multiple chart in highcharts
- Add settings to javascript plug-gin
- Highcharts column chart rendering transparent columns in IE8
- Highchart - Editing the tooltip date format content on hover
- Stop HighCharts change transparency of another series on hover of one series
- HighChart- Plot Stacked Bar Chart on Status for Every Minute
- Highcharts Display values from sql via json
- Fetch Values for Chart using JSON for Database driven Chart (highchart.js)
- pushing dynamic data to stacked percentage column in highcharts
- GWT Highcharts : Displaying 'Date' values on X-Axis
- highcharts pulling data from database table
- Issue with closing angular ui bootstrap modal
- Can't load highcharts.js and highmaps.js (map.js don't work)
- Formatting dates in HighCharts
- Highcharts - Selection Event Modify Options
- Highcharts scatter plot with variable line width
- "Extend" highcharts chart add properties and functions, prototype
- Highcharts columns overlapped
- Highmaps occuring 'Uncaught TypeError: undefined is not a function ' and not loading?
- Highcharts: Change spline line color according to y value
- HighCharts - Y-Axis padding in a bar chart
- rCharts different sizes for the two graphs in Shiny App