We Keep Coding

why tooltip appears wrong in my chart JS?

I have a chart that I have developed using Chart JS and it works good. The problem here is that when I hover on a point, the x axes of that point appears wrong! So for example in the image below, I am hovering on that orange point which have '23000' x axes point. but it appears '18428.91'! it has right values only with the first purple line on the bottom. I think the problem with the tooltip option but I do understand what’s the problem
html
<div class="card-body">
<canvas id="lineChart_1"></canvas>
</div>
JS
<script type="text/javascript">
(function($) {
/* "use strict" */
/* function draw() {
} */
var dzSparkLine = function(){
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var lineChart1 = function(){
if(jQuery('#lineChart_1').length > 0 ){
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
datasets: [
{ label: '5390',
data: [ {x: 10000 , y: 58.81 },
{x: 11000 , y: 57.34 },
{x: 12000 , y: 55.99 },
{x: 13000 , y: 54.21 },
{x: 14000 , y: 52.09 },
{x: 15000 , y: 49.32 },
{x: 16000 , y: 45.53 },
{x: 17000 , y: 41.87 },
{x: 18000 , y: 36.87 },
{x: 18428.91 , y: 34.15 },
],
borderColor: '#FF00FF',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#FF00FF'}, { label: '6160',
data: [ {x: 12000 , y: 76.66 },
{x: 13000 , y: 75.7 },
{x: 14000 , y: 74.15 },
{x: 15000 , y: 72.38 },
{x: 16000 , y: 70.14 },
{x: 17000 , y: 68.08 },
{x: 18000 , y: 64.76 },
{x: 19000 , y: 60.64 },
{x: 20000 , y: 55.75 },
{x: 21000 , y: 49.57 },
{x: 22000 , y: 42.18 },
],
borderColor: '#4472C4',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#4472C4'}, { label: '6930',
data: [ {x: 14000 , y: 97.17 },
{x: 15000 , y: 96.06 },
{x: 16000 , y: 94.58 },
{x: 17000 , y: 93.3 },
{x: 18000 , y: 91.41 },
{x: 19000 , y: 89.35 },
{x: 20000 , y: 86.44 },
{x: 21000 , y: 82.95 },
{x: 22000 , y: 79.01 },
{x: 23000 , y: 73.08 },
{x: 24000 , y: 65.36 },
{x: 25000 , y: 55.55 },
{x: 25357.89 , y: 50.67 },
],
borderColor: '#ED7D31',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#ED7D31'}, { label: '7700',
data: [ {x: 16000 , y: 119.81 },
{x: 17000 , y: 119.22 },
{x: 18000 , y: 117.988 },
{x: 19000 , y: 116.55 },
{x: 20000 , y: 115.05 },
{x: 21000 , y: 113.003 },
{x: 22000 , y: 110.186 },
{x: 23000 , y: 108.44 },
{x: 24000 , y: 104.15 },
{x: 25000 , y: 99.4 },
{x: 26000 , y: 93.33 },
{x: 27000 , y: 84.8 },
{x: 28000 , y: 68.7 },
{x: 28264.22 , y: 60.7 },
],
borderColor: '#A5A5A5',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#A5A5A5'}, { label: '8085',
data: [ {x: 19000 , y: 130.56 },
{x: 20000 , y: 129.3 },
{x: 21000 , y: 127.6 },
{x: 22000 , y: 126.08 },
{x: 23000 , y: 123.7 },
{x: 24000 , y: 121.088 },
{x: 25000 , y: 117.9 },
{x: 26000 , y: 113.6 },
{x: 27000 , y: 108.2 },
{x: 28000 , y: 99.17 },
{x: 29000 , y: 84.9 },
{x: 29555.19 , y: 66.15 },
],
borderColor: '#0070C0',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#0070C0'}, {
label: 'Efficiency',
data: [
{x: 17000, y: 100}
],
borderColor: 'black'
} ],
},
options: {
interaction: {
mode: 'y'
},scales: {
x: {
type: 'linear'
}
}
}
});
}
}
/* Function ============ */
return {
init:function(){
},
load:function(){
lineChart1();
},
resize:function(){
lineChart1();
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
dzSparkLine.load();
});
jQuery(window).on('resize',function(){
dzSparkLine.resize();
});
})(jQuery);
</script>
After Editing:

Line charts default to a linear Y axis and a category X axis. Specifying data.labels explicitly sets labels for the x-axis category ticks but these are just text, and won't match the computed scale.
As x and y values are passed both axes need to be linear:
Remove the data.labels array.
Add the following to options:
scales: {
x: {
type: 'linear'
}
}
Working example:
(function($) {
/* "use strict" */
/* function draw() {
} */
var dzSparkLine = function() {
//let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var lineChart1 = function() {
if (jQuery('#lineChart_1').length > 0) {
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
/*labels: [10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 18428.91, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 25357.89, 26000, 27000, 28000, 28264.22, 29000, 29555.19],*/
datasets: [{
label: '5390',
data: [{
x: 10000,
y: 58.81
},
{
x: 11000,
y: 57.34
},
{
x: 12000,
y: 55.99
},
{
x: 13000,
y: 54.21
},
{
x: 14000,
y: 52.09
},
{
x: 15000,
y: 49.32
},
{
x: 16000,
y: 45.53
},
{
x: 17000,
y: 41.87
},
{
x: 18000,
y: 36.87
},
{
x: 18428.91,
y: 34.15
},
],
borderColor: '#FF00FF',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#FF00FF'
}, {
label: '6160',
data: [{
x: 12000,
y: 76.66
},
{
x: 13000,
y: 75.7
},
{
x: 14000,
y: 74.15
},
{
x: 15000,
y: 72.38
},
{
x: 16000,
y: 70.14
},
{
x: 17000,
y: 68.08
},
{
x: 18000,
y: 64.76
},
{
x: 19000,
y: 60.64
},
{
x: 20000,
y: 55.75
},
{
x: 21000,
y: 49.57
},
{
x: 22000,
y: 42.18
},
],
borderColor: '#4472C4',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#4472C4'
}, {
label: '6930',
data: [{
x: 14000,
y: 97.17
},
{
x: 15000,
y: 96.06
},
{
x: 16000,
y: 94.58
},
{
x: 17000,
y: 93.3
},
{
x: 18000,
y: 91.41
},
{
x: 19000,
y: 89.35
},
{
x: 20000,
y: 86.44
},
{
x: 21000,
y: 82.95
},
{
x: 22000,
y: 79.01
},
{
x: 23000,
y: 73.08
},
{
x: 24000,
y: 65.36
},
{
x: 25000,
y: 55.55
},
{
x: 25357.89,
y: 50.67
},
],
borderColor: '#ED7D31',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#ED7D31'
}, {
label: '7700',
data: [{
x: 16000,
y: 119.81
},
{
x: 17000,
y: 119.22
},
{
x: 18000,
y: 117.988
},
{
x: 19000,
y: 116.55
},
{
x: 20000,
y: 115.05
},
{
x: 21000,
y: 113.003
},
{
x: 22000,
y: 110.186
},
{
x: 23000,
y: 108.44
},
{
x: 24000,
y: 104.15
},
{
x: 25000,
y: 99.4
},
{
x: 26000,
y: 93.33
},
{
x: 27000,
y: 84.8
},
{
x: 28000,
y: 68.7
},
{
x: 28264.22,
y: 60.7
},
],
borderColor: '#A5A5A5',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#A5A5A5'
}, {
label: '8085',
data: [{
x: 19000,
y: 130.56
},
{
x: 20000,
y: 129.3
},
{
x: 21000,
y: 127.6
},
{
x: 22000,
y: 126.08
},
{
x: 23000,
y: 123.7
},
{
x: 24000,
y: 121.088
},
{
x: 25000,
y: 117.9
},
{
x: 26000,
y: 113.6
},
{
x: 27000,
y: 108.2
},
{
x: 28000,
y: 99.17
},
{
x: 29000,
y: 84.9
},
{
x: 29555.19,
y: 66.15
},
],
borderColor: '#0070C0',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#0070C0'
}, {
label: 'Efficiency',
data: [
{
x: 17000,
y: 100
}
],
borderColor: 'black'
}],
},
options: {
interaction: {
//mode: 'y'
},
scales: {
x: {
type: 'linear'
}
}
}
});
}
}
/* Function ============ */
return {
init: function() {},
load: function() {
lineChart1();
},
resize: function() {
lineChart1();
}
}
}();
jQuery(document).ready(function() {});
jQuery(window).on('load', function() {
dzSparkLine.load();
});
jQuery(window).on('resize', function() {
dzSparkLine.resize();
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="card-body">
<canvas id="lineChart_1"></canvas>
</div>

Virtual measurement device with line series chart

I am using LightningChart JS and would like to implement a virtual measurement device, where I can click on point A and then drag to point B and obtain the x,y values of both point A and point B.
As far as I have looked into the event handlers they just return a mouse event with start and stop positions in terms of screen positions. Please, correct me if I'm wrong. Also please suggest an efficient way to do this.
Thanks in advance.

The mouse events return the mouse coordinates in the same coordinate space as normal JS mouse events. To get the click location in the series coordinate space, a couple of steps need to be taken.
First the mouse coordinates need to be converted to the engine coordinate space. The engine coordinate space is the canvas area with 0,0 on the bottom left of the canvas. This can be done with chart.engine.clientLocation2Engine(ev.clientX,ev.clientY). This returns the event coordinate in the engine coordinate space using the chart engine scale.
This needs to be then converted to the series coordinate. This can be done with translatePoint method. translatePoint can be used to convert points between two different scales. Scale in LightningChart JS is basically a coordinate space.
const m = chart.engine.clientLocation2Engine(ev.clientX, ev.clientY)
const translated = translatePoint(m, chart.engine.scale, lineSeries.scale)
Now the translated variable contains the click location in the series coordinate space.
See a full code snippet below where you can drag on the series area and when drag is stopped markers are placed to the start and end locations of the drag.
const {
lightningChart,
SolidLine,
SolidFill,
ColorRGBA,
AxisTickStrategies,
UIOrigins,
DataPatterns,
translatePoint,
ColorHEX
} = lcjs
const chart = lightningChart().ChartXY()
const diesel = [
{ x: 0, y: 1.52 },
{ x: 1, y: 1.52 },
{ x: 2, y: 1.52 },
{ x: 3, y: 1.58 },
{ x: 4, y: 2.00 },
{ x: 5, y: 2.00 },
{ x: 6, y: 2.00 },
{ x: 7, y: 2.00 },
{ x: 8, y: 2.26 },
{ x: 9, y: 1.90 },
{ x: 10, y: 1.90 },
{ x: 11, y: 1.90 },
{ x: 12, y: 1.90 },
{ x: 13, y: 1.60 },
{ x: 14, y: 1.60 },
{ x: 15, y: 1.60 },
{ x: 16, y: 1.00 },
{ x: 17, y: 1.00 },
{ x: 18, y: 1.00 },
{ x: 19, y: 1.74 },
{ x: 20, y: 1.47 },
{ x: 21, y: 1.47 },
{ x: 22, y: 1.47 },
{ x: 23, y: 1.74 },
{ x: 24, y: 1.74 },
{ x: 25, y: 1.74 },
{ x: 27, y: 1.5 },
{ x: 28, y: 1.5 },
{ x: 29, y: 1.5 }
]
const gasoline = [
{ x: 0, y: 1.35 },
{ x: 1, y: 1.35 },
{ x: 2, y: 1.35 },
{ x: 3, y: 1.35 },
{ x: 4, y: 1.90 },
{ x: 5, y: 1.90 },
{ x: 6, y: 1.90 },
{ x: 7, y: 1.92 },
{ x: 8, y: 1.50 },
{ x: 9, y: 1.50 },
{ x: 10, y: 1.3 },
{ x: 11, y: 1.3 },
{ x: 12, y: 1.3 },
{ x: 13, y: 1.3 },
{ x: 14, y: 1.3 },
{ x: 15, y: 1.32 },
{ x: 16, y: 1.40 },
{ x: 17, y: 1.44 },
{ x: 18, y: 1.02 },
{ x: 19, y: 1.02 },
{ x: 20, y: 1.02 },
{ x: 21, y: 1.02 },
{ x: 22, y: 1.02 },
{ x: 23, y: 1.02 },
{ x: 24, y: 1.02 },
{ x: 25, y: 1.02 },
{ x: 27, y: 1.30 },
{ x: 28, y: 1.30 },
{ x: 29, y: 1.30 }
]
const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
const lineSeries2 = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
lineSeries2.add(diesel.map((point) => ({ x: point.x, y: point.y })))
lineSeries.add(gasoline.map((point) => ({ x: point.x, y: point.y })))
const markerA = chart.addChartMarkerXY()
.setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#f00')))))
.setMouseInteractions(false)
const markerB = chart.addChartMarkerXY()
.setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#0f0')))))
.setMouseInteractions(false)
function getClickInSeriesScale(point, scale) {
const m = chart.engine.clientLocation2Engine(point.x, point.y)
return translatePoint(m, chart.engine.scale, scale)
}
chart.onSeriesBackgroundMouseDragStop((obj, ev, b, start) => {
let pointA = getClickInSeriesScale(start, lineSeries.scale)
let pointB = getClickInSeriesScale({x:ev.clientX,y:ev.clientY}, lineSeries.scale)
// move markes to start and end points
markerA.setPosition(pointA)
markerB.setPosition(pointB)
})
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>

Hide all series button in CanvasJS graph (javascript foreach usage)

The question related to CanvasJS, but probably any expert in pure javascript could help.
I need a button to hide/unhide all elements in canvasjs graph.
There is a working code that can hide element using array index:
chart.options.data[0].visible = !chart.options.data[0].visible;
I'm trying to go through array, but it doesn't work, obviously my code is wrong:
chart.options.data.forEach(visible = !visible);
How should I fix it?
The full code snippet is:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9},
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35},
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30},
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick = function(){
//Works for a single element using index:
chart.options.data[0].visible = !chart.options.data[0].visible;
//Doesn't work, need to modify
//chart.options.data.forEach(visible = !visible);
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>
UP:
Found solution with for loop:
for (var i = 0; i < chart.options.data.length; i++) {
chart.options.data[i].visible = !chart.options.data[i].visible;
}
But still interesting how should it work with foreach

forEach is an Array method that you can use to execute a function on each element in an array. On the other hand for is a loop that is more flexible.
In your case, you can hide all dataSeries onclick of button either using for or forEach. Check the code below:
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9 },
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35 },
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44 }
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30 },
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick = function(){
chart.options.data.forEach(function(dataSeries) {
if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
dataSeries.visible = false;
} else {
dataSeries.visible = true;
}
});
/*var dataSeries;
for(var i = 0; i < chart.data.length; i++){
dataSeries = chart.options.data[i];
if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
dataSeries.visible = false;
} else {
dataSeries.visible = true;
}
}*/
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

Thanks to Vishwas for detailed answer. Generally - yes, both for & forEach are fine usable here. I will mark it as correct, but it helped me to get more concise solution using forEach that I expected:
document.getElementById(""showAllSeries"").onclick = function(){
chart.options.data.forEach(function(dataSeries) {
dataSeries.visible = !dataSeries.visible })
chart.render();
};
Will leave it here for a history also:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9},
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35},
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30},
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick=function(){
chart.options.data.forEach(function(dataSeries){
dataSeries.visible = !dataSeries.visible
})
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

Highcharts: adding line to graph removes labels from X axis

Here is my chart:
Here's is the chart if I add a line as the first series (note the lack of labels on the x axis):
For some reason, most of the points on the x axis are disappearing.
Here's a reduced case:
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [
{
type: 'line',
data: [
{ x: 1476749571000, y: 36581540.37153554 },
{ x: 1477429910000, y: 36763124.20193958 }
]
},
{
type: 'scatter',
data: [
{ x: 1476749571000, y: 37170874 },
{ x: 1476756736000, y: 36541961 },
{ x: 1476760298000, y: 36412560 },
{ x: 1476771158000, y: 36766829 },
{ x: 1476774759000, y: 36819204 },
{ x: 1476778351000, y: 36193069 },
{ x: 1476781953000, y: 36289990 },
{ x: 1476789144000, y: 36751180 },
{ x: 1476796338000, y: 36058553 },
{ x: 1476807129000, y: 36803593 },
{ x: 1476810763000, y: 35963538 },
{ x: 1476821507000, y: 36896693 },
{ x: 1476825189000, y: 36187712 },
{ x: 1476835902000, y: 37084673 },
{ x: 1476843121000, y: 37136577 },
{ x: 1476846735000, y: 36607531 },
{ x: 1476853934000, y: 36334610 },
{ x: 1476864716000, y: 37140192 },
{ x: 1476875538000, y: 35929136 },
{ x: 1476900734000, y: 36137618 },
{ x: 1476907888000, y: 37195952 },
{ x: 1476915103000, y: 37170028 },
{ x: 1476922333000, y: 36438640 },
{ x: 1476936739000, y: 36425736 },
{ x: 1476951130000, y: 36954993 },
{ x: 1476969138000, y: 36288051 },
{ x: 1476972690000, y: 36666854 },
{ x: 1476976353000, y: 37066932 },
{ x: 1476979924000, y: 36628386 },
{ x: 1476990726000, y: 36997524 },
{ x: 1477005114000, y: 37036777 },
{ x: 1477008734000, y: 36069816 },
{ x: 1477019586000, y: 36788879 },
{ x: 1477026712000, y: 37195266 },
{ x: 1477030349000, y: 36568077 },
{ x: 1477033944000, y: 35936353 },
{ x: 1477041102000, y: 35840667 },
{ x: 1477069967000, y: 36826033 },
{ x: 1477077134000, y: 37165725 },
{ x: 1477084331000, y: 37078309 },
{ x: 1477091521000, y: 37195750 },
{ x: 1477095153000, y: 36788377 },
{ x: 1477105972000, y: 36951953 },
{ x: 1477109539000, y: 37072255 },
{ x: 1477113124000, y: 35688693 },
{ x: 1477120378000, y: 37021539 },
{ x: 1477134712000, y: 36883044 },
{ x: 1477138302000, y: 36838067 },
{ x: 1477141938000, y: 36719537 },
{ x: 1477145571000, y: 35900066 },
{ x: 1477149173000, y: 36141158 },
{ x: 1477156353000, y: 36647699 },
{ x: 1477163535000, y: 36516520 },
{ x: 1477167130000, y: 35817224 },
{ x: 1477181544000, y: 36758274 },
{ x: 1477188754000, y: 36717498 },
{ x: 1477195935000, y: 36913901 },
{ x: 1477203152000, y: 36518492 },
{ x: 1477217518000, y: 37143381 },
{ x: 1477224743000, y: 36334856 },
{ x: 1477231914000, y: 36910162 },
{ x: 1477249968000, y: 36977544 },
{ x: 1477257157000, y: 37174847 },
{ x: 1477267956000, y: 37051864 },
{ x: 1477289539000, y: 36343981 },
{ x: 1477296761000, y: 37020845 },
{ x: 1477300357000, y: 36180803 },
{ x: 1477307506000, y: 36145191 },
{ x: 1477311156000, y: 37102437 },
{ x: 1477325543000, y: 35496804 },
{ x: 1477332732000, y: 37193777 },
{ x: 1477339942000, y: 36683704 },
{ x: 1477354323000, y: 36577391 },
{ x: 1477357932000, y: 36231277 },
{ x: 1477361539000, y: 37198585 },
{ x: 1477365133000, y: 36789070 },
{ x: 1477379517000, y: 37138966 },
{ x: 1477386738000, y: 36953176 },
{ x: 1477397539000, y: 37135591 },
{ x: 1477408304000, y: 35867866 },
{ x: 1477411936000, y: 37141581 },
{ x: 1477415513000, y: 36864017 },
{ x: 1477422756000, y: 36743302 },
{ x: 1477426328000, y: 36948156 },
{ x: 1477429910000, y: 37199122 }
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Any ideas?

There appears to be a difference in how Highcarts interprets things between the line and scatter series types, though I am unclear how the particular scenario is explained.
But you can work around this by using a line series for both, and simply removing the line from the scatter data.
This way, you can skip setting a tickInterval, and you get the dynamic interpretation by the chart that you want.
Example:
{
type: 'line',
lineWidth: 0,
marker: {
enabled: true
},
findNearestPointBy: 'xy',
data: [ ... ]
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/g6fjjach/4/

Set axis.tickInterval to force ticks to be drawn.
xAxis: {
type: 'datetime',
tickInterval: 1000 * 3600 * 24 // one day interval
},
example: http://jsfiddle.net/g6fjjach/2/

Rickshaw / d3.js add axis title

Is there a way to add title to the axis? Typically, it is useful to have the y-axis display units. For example: http://code.shutterstock.com/rickshaw/examples/y_axis.html has just numbers, but in any kind of plot you would need to specify: %, $, km/s, etc. How to do that?
Thank you!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 300,
width: 800,
series: [
{
data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
color: "#c05020"
}, {
data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
color: "#30c020"
}, {
data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
color: "#6060c0"
}
]
} );
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
graph.render();