Related
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>
I have created a time series graph out of two data set. Now problem is there is an additional data that I would like to use and display in tooltip but I am not sure how to do it. I did some search and I kind of believe that this can be achieved via callbacks but don't know how to handle it. Right now the tooltip displays x and y values along with it I would like to display r value as well.
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
tooltips callbacks is your need Link info
and this is your need to reach r
data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
tooltips:{
callbacks: {
title: function(tooltipItem,data) {
console.log(data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r);
return "I am title";
},
label: function(tooltipItem) {
return "I am content";
}
}
} ,
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
You'll have to create a custom tooltip and then append the r value to it.
You can read about tooltips over here
You can access a particular attribute of a tooltip's point like this:
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
I wrote a custom callback to do this for you :)
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [s1, s2]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ':';
}
label += tooltipItem.yLabel;
r = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
label += " r: " + r;
return label;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
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>
i have created a chart using canvas js library
but i am having issue while displaying grid lines on the chart
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Axis Y with interval 20"
},
axisY:{
logarithmic : true,
gridthickness : 1,
minimum : 10,
maximum : 101,
},
data: [
{
type: "line",
dataPoints: [
{ x: 100, y: 71 },
{ x: 200, y: 55},
{ x: 300, y: 50 },
{ x: 400, y: 65 },
{ x: 500, y: 95 },
{ x: 600, y: 68 },
{ x: 700, y: 28 },
{ x: 800, y: 34 },
{ x: 900, y: 14}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
this is how i wanted the grid to be
this is how it looks now
anyone know how to properly format the grid lines, i have alse added demo snipped of how my data will look like
Minor grids are not available as of now. However by adding stripLines you can achieve the same as shown below.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Axis Y with interval 10"
},
axisY: {
logarithmic: true,
gridThickness: 0,
tickThickness: 0,
labelFormatter: function(e) {
return ""
},
minimum: 10,
maximum: 101,
},
data: [{
type: "line",
dataPoints: [
{ x: 100, y: 71 },
{ x: 200, y: 55},
{ x: 300, y: 50 },
{ x: 400, y: 65 },
{ x: 500, y: 95 },
{ x: 600, y: 68 },
{ x: 700, y: 28 },
{ x: 800, y: 34 },
{ x: 900, y: 14}
]
}]
});
chart.render();
addStripLines(chart);
function addStripLines(chart) {
var stripLines = [];
for (var i = chart.axisY[0].minimum; i < chart.axisY[0].maximum;
(i += 10)) {
chart.axisY[0].addTo("stripLines", {
value: i,
label: i,
labelPlacement: "outside",
labelBackgroundColor: "transparent",
labelFontColor: "black",
color: "black"
});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
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();