score:3
you need to provide either:
1) a pointstart
and pointinterval
property, on the series level (either in the plotoptions, or in the series object)
2) datetime values in the x values of your data
the datetime values can either by epoch time stamps (in milliseconds), or date.utc() objects.
the pointinverval, if used, must be in milliseconds.
example using the pointstart
and pointinterval
properties:
score:0
i have updated the code with the correct date time values and added the customised crosshair.
here is the final code with a correct data values
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonoptions: {
enabled: false
}
},
xaxis: {
type: 'datetime',
tickinterval: 2,
datetimelabelformats: {
day:"%e",
},
crosshair: {
color:'#e77378',
zindex: 2,
width: 3,
}
},
yaxis: {
min: 0,
max: 3000,
tickinterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalalign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotoptions: {
series: {
cursor: 'pointer',
pointstart: date.utc(2016,0,1),
pointinterval: 86400000, //1 day
},
},
areaspline: {
linewidth: null,
marker: {
enabled: false,
linecolor:'#e77378',
fillcolor:'#ffffff',
linewidth: 3,
radius: 4,
symbol:'circle'
}
}
},
series: [{
name: 'visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
Source: stackoverflow.com
Related Query
- Highchairs Tooltip not showing accurate date time
- HighCharts: Category values are repeated. Tooltip not showing the correct date
- high-chart not showing date and time in xaxis
- Highcharts not showing tooltip after update from null
- Stock Chart - Formatted Tooltip And Prefixes or Suffixes Not Showing
- High chart date time conversion showing wrong values
- Highcharts tooltip not showing on chrome
- High chart not showing accurate percentage for two curves?
- R Highcharter: On x-axis, Date is not showing correctly when dataframe has only one result
- Wrong date in tooltip in charts with daylight savings time in highcharts
- My highchart not showing the correct time on the x-axis
- How to disable the date and time mentioned in the navigator part and not on the x axis in highstock?
- How to fix Highchart Sparkline tooltip not showing
- highchart x axis not showing correct date labels
- highchartjs do not show time on tooltip
- Highcharts date not showing correctly on x-axis
- Highchart tooltip is not working when using it for date
- Time not showing correctly in HighChart
- Highstock Time series not formatting on scatter tooltip
- Date not showing on highstock chart
- Date Labels on X Axis Not Showing For Each Column
- Highcharts json data date in zulu time not working
- HIChart not showing graph when first time loads android
- X-Axis is not fully taking the width in date time chart in high charts
- Highcharts - tooltip time value does not match xAxis
- % not showing in tooltip pie chart highcharts angular js
- Highcharts showing time instead of date
- Highcharts tooltip not showing on unsort data
- Highcharts Error #16: charts not showing on the same page
- Highcharts - Keep tooltip showing on click
More Query from same tag
- highstockchart range selector x axis date is displaying only jan 8 1970 to jan 19 1970
- How to pass the correct data format from SQL to PHP
- Line chart series drilldown to another linechart series
- How to bind dynamic data to highcharts in Windows Phone 8.1 application
- Make the legend disappear in Highcharts
- Highcharts adding url to column chart
- How to pass laravel/PHP function to JS
- Content of highchart tooltip getting overflow
- how to create a highcharts area with the top area highlighted?
- How to make Highcharts color axis as thresholds instead of gradual?
- Highcharts or Fusioncharts,which one to select
- Highchart: incorrect candle chart for day saving time DST
- Formatting dataLabels in Highcharts
- What css styling to achieve to ensure Highchart fits within the outer container and resizes on window resize (i.e. they are responsive)
- Highchart is not working when I am fetching the axis values from database
- Getting callback is not a function in JS with Highcharts
- Unable to show all the words on Highcharts wordcloud
- Modify the text of Range selector in high stock
- error with adjusting height of pie chart using highcharts
- Shared legend of charts in react-highcharts?
- how to add live updating charts in yii with highchart
- Formatting JSON from a Pandas data frame for Highcharts within a Django template
- How to input plot data into highcharts with rails
- How to place tooltip above point in highcharts x-range?
- Highcharts: getting duplicate items in export menu when adding custom export options
- Highcharts Error #16: charts not showing on the same page
- Highcharts Combo graphs with common legend click
- How to return Highcharts ID, once it has been render?
- Exception when converting to image from Base-64 string
- Highchart and yii not drawing a pie