YouTip

[Highcharts Line Chart](#) The following example demonstrates an asynchronous data loading line chart. Here, we use the jQuery.getJSON() method to asynchronously load a CSV file: We have already covered the Highcharts configuration syntax in previous chapters. Now, let's look at a complete example: * * * ## Import the data.js File Asynchronous data loading requires the following JavaScript file: * * * ## Configuration ### X Axis Set the X axis with weekly intervals: var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // one week tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }}; ### Y Axis Set the Y axis with weekly intervals: Configure two Y axes: var yAxis = [{ // left y axis title: { text: null }, labels: { align: 'left', x: 3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false },{ // right y axis linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false }]; ### plotOptions plotOptions is used to set properties related to data points in the chart. var plotOptions = { series: { cursor: 'pointer', point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':
' + this.y + ' visits', width: 200 }); } } }, marker: { lineWidth: 1 } }} ### Example Filename: highcharts_line_ajax.html $(document).ready(function() { var title = { text: 'Daily visits at www.highcharts.com' }; var subtitle = { text: 'Source: Google Analytics' }; var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // one week tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 } }; var yAxis = [{ // left y axis title: { text: null }, labels: { align: 'left', x: 3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false },{ // right y axis linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false } ]; var tooltip = { shared: true, crosshairs: true } var legend = { align: 'left', verticalAlign: 'top', y: 20, floating: true, borderWidth: 0 }; var plotOptions = { series: { cursor: 'pointer', point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':
' + this.y + ' visits', width: 200 }); } } }, marker: { lineWidth: 1 } } } var series = [{ name: 'All visits', lineWidth: 4, marker: { radius: 4 } }, { name: 'New visitors' }] var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; json.plotOptions = plotOptions; var data = { csvURL: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/analytics.csv', beforeParse: function (csv) { return csv.replace(/nn/g, 'n'); } }; json.data = data; $('#container').highcharts(json); }); The output of the above example is: [Highcharts Line Chart](#)