We Keep Coding

ApexCharts day-label on xaxis is showing inconsistently

I'm using ApexCharts to display a rangeBar. If I slide the rangeBar from side to side, the date on the xaxis is showing inconsistently. For instance on this image, I have two days - the 26th and the 27th, but the day label is hidden.
If I zoom out and zoom in, the day-label is showing.
I've been looking at ApexCharts docs several times, and have tried many different things to enforce this day label to always show, but without any luck.
Here is my configuration
var options = {
series: [
{
data: arr
}
],
colors: [
"#00be00",
],
chart: {
height: 150,
width: '100%',
type: 'rangeBar',
toolbar: {
tools: {
download: false,
// pan: false,
},
},
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'datetime',
},
};
Can I somehow force the day-label to always show?

Way to add linebreaks to the label for a dataset in chart.js?

I am creating a bar chart usng chart.js and am trying to add a line break to the label for the dataset (which is used as a title for the whole bar chart). I see it is possible to pass an array for the labels for each piece of data which adds a line break but this does not seem to work for the top level label. I have included my code below.
processCharts[key] = new Chart(ctx, {
"type":"horizontalBar",
"data": {
"labels":["Actual", "Target"],
"datasets":[{
"label": key.split(" "),
"data":[actual, target],
"fill":false,
"backgroundColor":[
"#B3CE3A",
"#B1C1C8",
],
"borderWidth":1}]},
"options":
{ "responsive":"true",
"maintainAspectRatio": false,
"legend": {
boxwidth:
},
"scales":{
"xAxes":[{
"ticks":{
"beginAtZero":true,
callback: function(label, index, labels) {
return formatTime(label);
}
}}],
"yAxes": [{
"ticks": {
"padding": 0
}
}]
},
},
plugins: [{
beforeInit: function(chart) {
if (/\n/.test(chart.data.datasets[0].label)) {
chart.data.datasets[0].label = chart.data.datasets[0].label.split(/\n/);
}
}
}]
});
Unfortunately when it splits the key I get for example "Emergency,Change" where I want a newline between the words.
Any help would be much appreciated

Chart.js one label per stacked bar

I'm using chart.js with datalabels plugin but I'm having issues with displaying one label per stacked bar.
I have tried to access to the dataset meta to distinguish to show the labels but struggling to achieve. Help me to do that.
Please see my example here: https://jsfiddle.net/fraserr/9ezggxx5/314/
var datasets = JSON.parse('[{"username":"test name","stack":"2","label":"test name - actual","dataset":{"2018-12-17":"3","2018-12-24":"1"},"data":["3","1"],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"test name","stack":"2","label":"test name - target","dataset":{"2018-12-17":"10","2018-12-24":"10"},"data":["10","10"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - actual","dataset":{"2018-12-17":"2","2018-12-24":0},"data":["2",0],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - target","dataset":{"2018-12-17":"2","2018-12-24":"2"},"data":["2","2"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1}]');
new Chart('chart', {
type: 'bar',
data: {
labels: ['2018-12-17', '2018-12-24'],
datasets: datasets
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
suggestedMax: 50
}
}],
yAxes: [{
stacked: true
}]
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
return ctx.dataset.username;
},
align: 'end',
anchor: 'end',
}
}
}
});
My desired result is to have "test name" on at the top of the 1st bar, "Santa Claus" on the 2nd, "test name" on 3rd and "Santa Claus" on 4th. Ideally I would always show one label per bar (even when one is bar per stack is hidden).
Thanks in advance!

Chartist - add text to center of donut chart

I am trying to create a donut chart with text in the center. I need the donut chart to look like below:
The total value is a variable that I am passing to the function that creates the chart. As of now this is what I have:
Code for the above chart is below:
new Chartist.Pie('.ct-chart', {
series: [{
value: 10,
className: 'pieChart1',
}, {
value: 6,
className: 'pieChart2',
}, {
value: 5,
className: 'pieChart3',
}]
}, {
donut: true,
donutWidth: 20,
width: '138px',
height: '138px',
showLabel: false
});
Can someone please help me create the text inside the donut?

It exist a plugin to do this !
http://gionkunz.github.io/chartist-js/plugins.html#filldonut-plugin
Implement ths dependences and add this code to your object definition params :
plugins: [
Chartist.plugins.fillDonut({
items: [{
content: '<h3>160<span class="small">mph</span></h3>'
}]
})
],

Vary Color Bar For Two Series Data in Jqplot

I want to know how to make vary color bar for two series in Jqplot. If I have only one series data, it works perfectly like the image below
The red and green color based on its value.
But if I have two series data, I can't configure to have two series color for each series data. So far, I can only make this graph
I want the two series graph can have vary color based on its value as well as the one series graph.
This is my code
chart = $.jqplot('map-chart', [dataChart, dataChart2], {
title: 'TIME',
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'ne'
},
series: [{label: 'Current data'}, {label: 'Worst data'}],
//seriesColors: seriesColors1,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
//rendererOptions:{
//varyBarColor: true
//}
},
axes: {
xaxis: {
label: 'station',
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: tickers,
tickOptions: {
angle: -30
}
},
yaxis: {
min: 0,
label: 'Time',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
fontSize: '8pt'
}
}
},
highlighter: {show: false}
});
I have tried seriesColors : [seriesColors1, seriesColors2] but it didn't work.

Basically you need to create a series array, that contains a dictionary per entry, with a seriesColors entry. A working example is shown in the following jsfiddle:
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]],
{
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#a30", "#4b0", "#b40", '#af0', '#fa0']}
],
highlighter: { show: false }
});
(The fiddle may stop working if I the external js files are changed; jsfiddle doesn't have jqplot libraries by default.)

I came across this today and as dr jimbob had predicted, all the external files had succumbed to link rot. I found a CDN site and updated the fiddle to the latest jQuery & JQPlot resource files, available here: http://jsfiddle.net/delliottg/WLbGt/96/
Just to satisfy the JSFiddle cop on SO that won't let me post this w/o it:
//this is not my code, it's only here to satisfy the SO require that fiddles have
// code associated with them
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true }
},
series: [
{seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']},
{seriesColors: ["#00f", "#b0b", "#a30", "#4b0", '#af0']}
],
highlighter: { show: false }
});
I had nothing to do with the fiddle itself, I just updated it so it worked. Hope this helps someone (turns out it wasn't what I was looking for, but ya pays yer money & ya takes your chances).