We Keep Coding

Chart.js 2.9.4 - setting axis min\max via `afterDataLimits` callback is working incorrectly (while setting via options is working correctly)

I have a Chart.js 2.9.4 line chart (same problem with latest 3.5.1 version) and I want to set yAxis min\max via afterDataLimits callback (because I need to calculate axis max and min in runtime, basing on values ​​in datasets):
var data = {
labels:["0","1","2"],
datasets: [{
lineTension: 0,
fill: false,
data: [0, 10, 4]
}]
};
var options = {
animation: false,
scales: {
yAxes: [{
afterDataLimits: function (axis) {
//Setting axis min\max via callback - yAxis is -2 -> 12
axis.max = 10.5;
axis.min = -0.5;
},
ticks: {
//Setting axis min\max via options - yAxis is -0.5 -> 10.5
//min: -0.5,
//max: 10.5
}
}]
}
};
var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
Setting axis min\max via options is working correctly (yAxis is -0.5 -> 10.5):
Setting axis min\max via afterDataLimits callback is working incorrectly (yAxis is -2 -> 12):

Plotlyjs ticktext/tickvals not showing xaxis labels

I have been trying to utilize the tickvals/ticktext on plotlyjs to be able to show duplicate values on a graph for the xaxis. It works in the aspect of separating the data (having multiple duplicate values be on the xaxis, but a 1:1 data point) -- the issue that I am having is that no xaxis tick marks or xaxis labels show up for the ticks.
Here is a code pen of my problem:
https://codepen.io/hiquetj/pen/yLeBNjJ
Here is the code for easier reading:
var trace1 = {
y: [1323,1070,849,1312,1214,1264,680,2006,1625,0,1199,1770,1880,708,603,649,1384,732,2312,92,1377,1125,1219,1757,1207,2397,1190,1818,2846,1200,1685,1563,1203,1059,820,4303,812,3640,1924,4185,1269,2263,1140,1210,1638,1362,4915,1594,683,1222],
mode: 'markers'
};
var trace2 = {
y: [5870,1574,1372,2093,1361,1388,615,1927,947,,1040,,,638,546,542,1051,637,4161,289,1103,0,1308,1658,1340,2198,1245,1568,2392,1297,1583,1281,1282,697,482,3633,653,3233,2096,3815,1401,2116,867,1232,1420,1010,4091,478,208,1262],
mode: 'lines'
};
var trace3 = {
y: [1141,1324,424,668,414,407,494,1763,1100,,522,360,108,474,145,621,689,234,154,40,303,364,407,1133,347,1527,358,1745,1223,345,1131,1024,365,754,614,1894,287,5332,363,568,335,1545,1294,383,1255,1107,2090,612,66,390],
mode: 'lines+markers'
};
var data = [ trace1, trace2, trace3 ];
var layout = {
xaxis: {
ticktext: [24346247,24346247,24346247,24346247,24332892,24332892,24332892,24332670,24332670,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24316962,24316962,24316962,24290013,24290013,24290013,24290013,24290013,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933],
tickvals: [24346247,24346247,24346247,24346247,24332892,24332892,24332892,24332670,24332670,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24316962,24316962,24316962,24290013,24290013,24290013,24290013,24290013,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933],
},
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
Example of x axis labels not showing up through codepen.

If you do not set x values for your traces, they are automatically assigned x values from 0 to n. Your ticktexts will therefore only be visible if your tickval array is [0, 1, 2, 3, ..., n], see this jsFiddle: https://jsfiddle.net/9okdx4b2/

Plotly - I want to color each X Axis value in different color based on condition

Language: JavaScript
Framework: Plotly
I have a requirement where i want x-Axis values to be colored individually instead of coloring all the values in x-Axis.
I tried below code, but it does the same thing to all the values on axis.
Here the color 'red' gets applied to all the values on x-Axis. I need each value to be colored based on the colors mentioned in the array 'col' in below code.
var data = [{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}];
var col = ['red','black','yellow'];
var layout = {
xaxis : {
tickangle : -45,
tickfont : {
size : 16,
color : 'red'
}
}
};
Plotly.newPlot('myDiv', data,layout);

If you want to color the bars individually you would need to assign the colors to the color attribute of the marker object inside your data.
If you want to color the axis' ticks individually there is no way of doing it directly in plotly. tickfont color only takes a single color but this should not stop us. The tick text is inside a SVG element with the class name xtick. We can select it and override its fill aka color with our colors.
var col = ['red','black','yellow'];
var data = [{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar',
marker: {color: col}
}];
var layout = {
xaxis : {
tickangle : -45,
tickfont : {
size : 16,
color : 'red'
}
}
};
Plotly.newPlot('myDiv', data,layout);
var ticks = document.getElementsByClassName('xtick');
for (var i = 0; i < ticks.length; i += 1) {
ticks[i].getElementsByTagName('text')[0].style.fill = col[i % col.length];
}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Can i show table on x-axis as like grouped categories in highcharts - But no grouping

I just want to show table just below the X-axis column charts (respective bars), I know grouping can create table but i don't want grouping to be used. just need table for x-axis values. As shown in below image,
Can i do this using highcharts properties. Only table will be present to x-axis labels.
Is it possible using highcharts lib ?

You can make ticks longer by setting xAxis.tickLength property.
And then, render an additional line in the bottom of the ticks.
function renderBottomLine() {
var chart = this,
axis = chart.xAxis[0],
line = axis.bottomLine,
x1 = chart.plotLeft,
y = chart.plotTop + chart.plotHeight + axis.options.tickLength,
x2 = x1 + chart.plotWidth,
path = [
'M', x1, y,
'L', x2, y
];
if (!line) {
axis.bottomLine = chart.renderer.path(path).attr({
'stroke-width': 1,
stroke: '#ccd6eb'
}).
add();
} else {
line.animate({
d: path
});
}
}
Highcharts.chart('container', {
chart: {
events: {
load: renderBottomLine,
redraw: renderBottomLine
}
},
example: http://jsfiddle.net/xuyyt6nd/

C3.js bar plot with dates as x axis

I'm trying to make a C3 bar plot using the X with dates. I have the data formatted already in consecutive dates aggregated by days.
I've created a fiddle with what I thought will work: https://jsfiddle.net/8aL1stcs/
the plot as such is working fine, here is a version of the fiddle with the X axis commented out: https://jsfiddle.net/8aL1stcs/1/
var elementID = "#myPlot";
var myData = {};
//myData.x = 'x';
//myData.xFormat = "%Y-%m-%d";
myData.type = 'bar';
myX = ["2015-11-20", "2015-11-21", "2015-11-22","2015-11-23", "2015-11-24"];
myY = [1,2,3,4,5];
myX.splice(0,0,'x');
myY.splice(0,0,'New Reports');
myData.columns = [];
//myData.columns.push(myX);
myData.columns.push(myY);
var chart = c3.generate({
bindto: elementID,
data: myData,
size: {
height: 480,
width:400,
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
Basically I want to mimic this plot here:
For this, I think I need to use some automated way of handling the x-ticks. In other words: I don't want to set the ticks manually.

You missed this in your c3 generate json.
axis: {
x: {
type: 'timeseries',
tick: {
format: "%b-%d"//format in which you want the output
}
},
}
Working code here
Hope this helps!