score:10
you will most likely have to use the highcharts renderer for this task, as what you want to do doesn't quite fit in with a grid, and doesn't quite fit in with plot lines.
i have made a very simple example, based on your code which shows drawing an arbitrary vertical line, in a hard-coded location. to achieve your goal you will have to calculate a few things, such as the x/y position for the start point of each line, and the height of the line based on that points value.
here's a slightly different example with zindex and a line as you actually want it, using the v
path command to draw a vertical line.
score:0
the solution is to include a new series with the type column
and add the same data to this serie than the other serie that includes the point.
{
/* column type */
type: 'column',
name: '',
data: [],
color: '#ed1c24',
pointwidth: 2,
showinlegend: false,
states: { hover: { enabled: false } }
}
use this jsfiddle as guide: http://jsfiddle.net/ndpu6/
score:2
if you want ony one line (and area starting from that):
xaxis:{
plotlines: [{
color: 'red', // color value
//dashstyle: 'solid', // style of the plot line. default to solid
value: + new date(), // value of where the line will appear
width: '2' // width of the line
}],
plotbands: [{
color: '#fffafa', // color value
from: +new date(), // start of the plot band
to: +new date()+1000*24*3600*30, //30 days
}],
}
score:3
try this jsfiddle. from highcharts api.
score:5
i think you might be looking for plot bands and/or plot lines.
here's some more information:
http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
Source: stackoverflow.com
Related Query
- How to draw vertical lines on Highcharts graph?
- How to add vertical lines to graph with HighStocks or HighCharts?
- How to draw SVG lines inside HighCharts barcharts?
- How to draw a line on a highcharts graph from an AJAX call?
- Draw vertical line when two lines cross in Highcharts
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- HighCharts - Angular, how to get y axis labels on the vertical lines drawn from x axis
- How to remove tick lines from secondary y axis in highcharts heatmap graph
- How to draw a vertical line on HighCharts?
- How to hyperlink bar graph in highcharts
- How to change graph colour above and below plotline in Highcharts
- How do I get the value of a highcharts graph point on mouseover?
- How to pass custom data into Highcharts graph click event
- How do I set highcharts line graph point colors to an array of colors?
- How to adjust the spacing of grid lines in highcharts
- Highcharts - How do I get dashed lines in legend
- Highcharts: How to provide a custom stack label in highcharts bar graph from within the stackLabel formatter?
- How to change area graph color above certain value in Highcharts
- How can I force ticks/grid lines on a Highcharts datetime X axis to arbitrarily line up with data points?
- How to draw a bubble map with longitude and latitude using Highcharts in react
- How To Call A Function To Make A Graph Using HighCharts in PHP
- How can I make a graph with highcharts from csv file?
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- How to draw two lines in HighStocks using candlestick with intraday
- Use ajax to draw graph dynamically using Highcharts
- Highcharts - How to draw Confidence Intervals
- how can i add in highcharts a different dashStyle just for a part of the graph
- HighCharts & MVC: How to load whole graph definition and data with JSON?
- How to use Highcharts React to create chart with multiple lines for same XAxis?
More Query from same tag
- Highmaps Flight Routes add arrows
- Highcharts columns are thin when 10+ series displayed
- How to display no data found in highcharts
- Highcharts - Export button options offset using a little div
- Highchart: show seconday y-axis tick positions 0 to 12
- How to add data to a custom HighChart's HighMaps map? joinBy?
- How to convert JSON
- How to transform Javascript Object based on one of the column?
- HighCharts specific symbol on mouse hover
- Highcharts: Shared tooltip for heatmap
- highcharts: individual serie shift
- Highchart clickable link in tooptip
- tickinterval not working high chart for x axis
- Highcharts: Export multiple charts using jspdf
- Specify X-Axis Category in Series Data in Highcharts
- scatter plot filter legend on zoom
- Highcharts bar chart with bar colored based on value
- My Highchart is stepping back to 01/18/1970 everytime. Why?
- JSON and Python Django - can't get around same origin issue- callback function isn't called
- Highcharter plotBands, plotLines with time series data
- Highcharts, build a "Text" graph
- Divide y-axis values by 10 onclick
- How to remove additional number appear in x-axis Highchart
- How do you process large amounts of data without using a database?
- How to make drill down in stacked Column Line chart in Highchart
- How to send other variables in x-axis of ReactHighCharts?
- Jasper charts - Undefined length exception
- 3d chart for Highcharts with legends
- React: How to show correct date and plot data as Months in Highcharts
- What format should data be to display highchart?