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
- Using Highchart with javascript
- I was working on highcharts and react and want to built something like this with highcharts. Is it possible?
- Is it possible to include maplines in highcharter maps?
- jQuery UI Shopping Cart in Tabs - After button-click draw Highcharts
- Highcharts line charts not displaying all the dates
- Assign a color to every value in Javascript using HighCharts
- Redirecting to a URL on Highcharts marker click
- HighCharts Not Adding Series Data Points
- Remove extra ticks when tickmarkPlacement: 'on'
- How to render highcharts from external json for multiple series
- Angular child component doesnt recognize input changes
- How to dynamically adjust dataGrouping and set variable time intervals for HighStock data (HighCharts)
- Highcharts: picking points in one chart and have the same points highlight in other charts
- Pie of a Pie chart in HighCharts
- Highcharts series data not persisting through angular route change
- HighCharts. How to align yAxis title and yAxis labels to right in one line?
- Filling xAxis for all nights in Highcharts
- How to find the linkedSeries in Highcharts
- How to change the distance between lines of grid?
- Jquery, Highcharts enable html exportChart
- mongodb datetime filter and aggregation
- Highcharts Series Margins
- How can I change opacity of not hovered columns on highchart?
- Format tooltip in highchart map for dynamic variables, some with commas and others with percents
- How can I set a min/max width to highchart's columns?
- Highchart heatmap plot x-axis on time and y-axis on string
- Highcharts chart width issue on lazy loading of stylesheet
- Using the accessibility.js module with highcharter
- How to change graph colour above and below plotline in Highcharts
- Remove Highcharts x-axis label thousands separator