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 Articles
- 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
- How to create chart with highchart in which bar doesn't start from 0 in y axis?
- Is it possible to create a bubble polar chart with Highcharts?
- Possible to create a dual y axis chart but where the secondary y series is using a secondary x axis?
- Is it possible create a Highstock chart using TWO PANES and MULTIPLE SERIES in a pane
- Is is possible to create a grouped bar chart in HighChartJS?
- Is it possible with Chart js or which chart Library can provide this type of chart?
- Is it possible to create a multi level (stacked) donut chart with variable diameter on the last stack
- How to create a column range chart in Highcharts using range and navigator functions?
- HighCharts - How to create dynamic chart that exports EVERYTHING
- How to create a new Highstock chart with new Highchart and not jquery?
- Which chart type should i choose to show change in values between 2 dates?
- How to create Chart Data using SQL query
- chart shows very small pie
- Create Density Heatmap Chart using Jquery with array of data
- How to create an inner circle pie chart in Highcharts
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- How can i create doughnut chart using oxyplot in xamarin.android?
- I'm trying to create a timeseries chart having stacked columns in HighCharts
- how to create donut chart using highcharts?
- create a donut chart using highchart using jquery json object
- Angular 4 - Create Heat Chart
- Highcharts shows data but can't display chart
- How do I select which columns from my CSV to chart with HighChart?
- How to create a table for legend of a Stacked Chart in Highcharts?
- Create six chart with the same rendering,different data (highchart )
- Conditional coloring of marker in box plot in highcharts
- HighCharts Stock Chart error code 18
- Using wkhtmltopdf with highcharts shows blank chart
- highcharts basics
- How do I pass in parameters to the Highcharts pointFormatter callback function
- Not showing x-axis label in lower configuration
- xAxis labels refuse to align with columns
- How to make a function call every few seconds in c#?
- Is HighCharts custom marker symbol shape modifiable?
- How to unset a dynamically applied point color in a Highcharts pie chart?
- How to set json data from url on highchart and polling the json data after 1 sec to dislay on highchart using Angular js
- Getting Highcharts tooltip to return an angular directive?
- Disabling HighCharts labels
- Highcharts Treemap Tile Name Blocking Click
- HIGHCHART Activity guage tooltip issue
- how to customize heatmap highcharts plot area and the color of the datalabels
- Highcharts live graph setExtremes issue
- highcharts legend overlapping
- Highchart Scrollbar position
- Highcharts stacked and grouped columns: Share label across all stacks
- Highcharts: changing color on hover ranking chart
- highstock issue : pointInterval property is not working when series data set contains date and value?
- stacked column points connected with a dashed line highcharts