score:1
Accepted answer
What about setting the x values for those lines? http://jsfiddle.net/qPqCW/
, {
name: "Revenue",
data: [
{x:-0.2, y:49},
{x:0.8, y:71.5},
{x:1.8, y:106.4}],
type: "line"
},
, {
name: "Operating Expenses",
data: [
{x:.2,y:48.9},
{x:1.2, y:38.8},
{x:2.2, y:39.3}],
type: "line"
}
To calculate the X values, I looked to the source code. The following assumes you are using the default values of groupPadding .2, and pointPadding .1. I modified the getColumnMetrics function to get the general solution. Here's what I came up with:
var columnMetrics = [];
for (j=0;j<index;j++) {
var categoryWidth = 1,
groupPadding = categoryWidth * .2,
groupWidth = categoryWidth - 2 * groupPadding,
pointOffsetWidth = groupWidth / index,
pointPadding = pointOffsetWidth * .1,
pointWidth = pointOffsetWidth - 2 * pointPadding,
colIndex = j,
pointXOffset = pointPadding + (groupPadding + colIndex *
pointOffsetWidth - (categoryWidth / 2));
columnMetrics.push( {
width: pointWidth,
offset: pointXOffset,
center: pointXOffset + (pointWidth /2.0)
});
}
var series = [];
for(i=0;i<index;i++) {
series.push({
name: "Column" + index,
data: [
49.9,
71.5,
106.4],
type: "column"
});
series.push({
name: "Line" + index,
data: [
{x:0 + columnMetrics[i].center, y:49},
{x:1 + columnMetrics[i].center, y:71.5},
{x:2 + columnMetrics[i].center, y:106.4}],
type: "line"
});
}
This shows the results with 1 to 10 series: http://jsfiddle.net/b8gS5/
Source: stackoverflow.com
Related Query
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts column + line combination chart with multiple series
- High charts Issue with stock bar chart multiple line series
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts - Scatter chart with a line connecting the dots in the series
- Need stacked column chart with multiple series
- Highcharts Grouped Column Chart with Multiple Groups?
- Change chart type and redraw with multiple series in Highcharts
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- How to set column width for columnRange chart with multiple series
- Highcharts: Dual axis line and column with multiple series
- Highcharts Combination Chart: Column covering line series marker
- Highcharts multiple series combined with linkedTo hover issue
- highcharts column chart with line, need line start at bar start
- Highcharts mouse tracking behaviour with multiple arearange & line series
- HighCharts column chart populated with series data from a function
- HighCharts line series not displaying properly with stacked bar combo chart
- Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap
- Hide a specific series legend in a column chart with multiple series
- Highchart Line chart – data series with multiple axis - 2nd series placed in the middle of X axis
- Highcharts events issue with plotbands in Date Range Line Series
- Highcharts : using same div to load a chart multiple times with different series data
- How to have multiple highcharts with different series data in vuejs without repeating code
- Line and column combo chart with multiple columns for each category, how to position line marker for each category on a specific column?
- Highcharts cloud issue with data source when duplicating chart
- Highcharts Line Chart Drill down into multiple series
- Highcharts real-time line chart with multiple data streams
- How to dynamically populate Highcharts column chart with two series
- Column chart in Highcharts - select series with a click
- How to Create a Stacked Column Chart with Dynamic Series in Highcharts
More Query from same tag
- Highcharts gauges - getJSON
- Unable to show Highcharts graph with in ASP.Net MVC
- In highcharts, the data in the legend is overlapping incase of data less than 10000
- Highchart Annotation Scroll
- Highcharts error #17 when adding series to the chart using angular 4
- highchart stacked column total data per categories
- Highcharts, How to show datatable when export PDF and not show pdf when normal with Drilldown Chart
- Highmaps missing cities for California State
- line fading while hovering on synchronized chart in highchart
- highcharts v3.0Beta bubblechart not rendering. Possible bug?
- Highchart throws errors when zoom out and hover point
- How to break highchart bars for extreme values
- Highcharts: How to extend the x axis beyond the last column
- last label in x axis with datetime format not coming in highchart
- Can't access custom value from point HighCharts
- Hightlight a Bar in HighCharts Bar chart
- Use Javascript to select a colour declared in CSS
- HIghcharts, Selecting a second Point within the Point.select event
- Highstock chart doesn't show after it has been cleared
- HighCharts - 2nd yAxis graphs not scaling correctly
- Plotbands to highcharts based on category
- highchart/highstock tooltip does not adjust after zoom
- How can I use variable in Highchart?
- How to add Highcharts on UIWebView in iOS?
- How to have first level as column chart and second level as Fixed placement columns in drill down highcharts
- How to make a multi pane on highstock (highcharts) which contain a stacked area graph?
- Highchart tooltips formatter issue
- HighChart son data is not displaying on webpage
- Stacked Column Highchart with Angular6 is not working
- HighCharts Arearange Chart not working