I would like to force a loading state on apexchart, while changing it's data using setInterval.
See example for loading each interval here: React ApexCharts update chart with interval
I can use the noData option, but it'll work only for the first time
See noData example here
How to show "loading..." text as a placeholder before my Apexcharts actually loads?
How can i force a "Loading..." message each setInterval call, before calling the server?
I wrote this function (seriesArrState is the array of serieses), but I wonder if there's a better option
const emptyChart = () => {
chart?.updateOptions({
series: seriesArrState.map((series) => {
return { ...series, data: [] };
}),
annotations: { points: [], xaxis: [] },
xaxis: {
labels: {
show: false,
},
},
});
});
};
Related
i am trying to add error bars to a horizontal bar chart in chartjs using the chartjs-plugin-error-bars.
It seems that the error bar is tied to a label rather than the actual data, but i dont want do display the label. is there a way to either not declare a label an still have error bars, or just hide the label.
var barChartData = {
labels: ["shouldNotBeDisplayed"],
datasets: [{
data: [
56,
],
errorBars: {
shouldNotBeDisplayed: {plus: 1, minus: 1},
}
}]
};
you can try it out here and see the chart:
https://codepen.io/reckert/pen/rNWmdeK
Thank you in advance
You can filter out tick labels by defining a yAxes.ticks.callback function as follows.
options: {
...
scales: {
yAxes: [{
ticks: {
callback: () => undefined
}
}]
},
For further details, please consult chapter Creating Custom Tick Formats from the Chart.js documentation.
Is it possible to adjust the tooltips displayed in a line chart rendered using Chart.js 2.4.0?
It recently shows both x and y value and the name of the dataset. I would need only the name of the dataset.
You can change the configuration for tooltip in options. In tooltip, we have callback object. In which, you set the title to a custom function that returns the title you want to give to the tooltip.
[sample-code]
var chartInstanceHoverModeNearest = new Chart(ctx, {
type: 'bar',
data: data,
options:{
events:["click"],
title : {
display : true
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
tooltips: {
enabled: true,
callbacks : {
title : function(){
return "Your Custom Title";
},
label : function(){
return "";
}
}
}
}
});
Below are the methods in callback object. If you want to extend more you can override these methods to give custom functionality
callbacks : {
afterBody:(),
afterFooter:(),
afterLabel:(),
afterTitle:(),
beforeBody:(),
beforeFooter:(),
beforeLabel:(),
beforeTitle:(),
footer:(),
label:(tooltipItem, data),
labelColor:(tooltipItem, chartInstance),
title:(tooltipItems, data)
}
I am using chart.js to show a line chart. How can I hide a tooltip label for a chart.js line chart? The label in the tooltip is showing undefined so I want to hide the label (please see the screenshot)?
Perhaps there is a way to modify tooltip where I can show only the legends value in tooltip? My code is as follows:
myLine = new Chart(ctx).Line(lineChartData, {
type: 'line',
responsive: true,
scaleShowGridLines : false,
bezierCurve : false,
animationEasing: "linear",
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
showTooltips: true,
scaleLineColor: "rgba(0,0,0,.8)",
});
Just set the tooltipTitleFontSize to 0 in your options.
Preview
Script
myLine = new Chart(ctx).Line(lineChartData, {
...
tooltipTitleFontSize: 0
});
I know I am late, but I guess it still has merit to add this one.
check this : https://stackoverflow.com/a/44632748/12061669
It uses a function to hide the title:
options:{
tooltips:{
callbacks:{
title: ()=>{}
}
}
}
Setting the title's font size to zero is not ideal as you will still see an (ugly) extra space on top of the tooltip, as if the title line is still there - which honestly is what you'd expect.
Instead, I used Yumin Gui's answer but had to return null for it to work:
`
tooltips: {
callbacks: {
title: () => null,
},
},
The result is exactly as in the pie charts (which does not have a title in its default tooltips).
To hide the tooltip title/label, it should be added in the options object for that chart as follows:
options: {
plugins: {
tooltip: {
callbacks: {
title : () => null // or function () { return null; }
}
}
}
}
Do refer to the documentation to understand better that it should be handled with a custom callback function, and it is not a config that can be set in options directly.
The accepted answer won't work in newer versions of chart.js, as Aman said in comments, what you can use now is this:
tooltips: { titleFontSize: 0 }
Example:
var bar_chart = document.getElementById('bar_canvas').getContext('2d');
window.myBar = new Chart(bar_chart, {
type: 'bar',
data: bar_chart_data,
options: {
tooltips: {
titleFontSize: 0,
bodyFontSize: 14,
}
}
});
Updated 03/17/2016 to better reflect current best practices for EmberJS v1.13.0 and up.
Problem
I am rendering Highcharts into a component and i almost have it working, but the binding of a property into the component is getting lost somewhere.
This is how I call the component:
//templates/index.hbs
{{pie-chart data=pieData}}
This is what the data property looks like (currently set in a controller):
//controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
init() {
this._super(...arguments);
this.pieData = [
['0 - 30', 2.5],
['31 - 60', 7.5],
['61 - 90', 12.5],
['91 - 120', 77.5]
];
}
});
And here is the component logic:
//components/pie-chart.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['chart'],
renderChart() {
return this.$().highcharts({
chart: {
height: 275
},
title: null,
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
},
series: {
type: 'pie',
data: this.get('data')
},
colors: ['#777777', '#888888', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee'],
credits: {
enabled: true
}
});
},
didUpdateAttrs() {
let chart = this.$().highcharts();
let series = this.get('data');
chart.series[0].setData(series);
},
didInsertElement() {
this._super(...arguments);
this.renderChart();
},
willDestroyElement() {
this.$().highcharts().destroy();
}
});
i got the idea from this blog and i am trying to adapt it to make more charts.
the chart renders onto the screen, but it is blank... there are no errors to report... the only thing i can think is the data property is not being handled correctly in order to plot the graph?
I am not sure if this is my wrong use of Ember code, or wrong use of Highcharts code?
Solution
the series property inside the highchart was supposed to be an array of objects.. but I mistakenly defined just an object:
the fix:
series: [{
type: 'pie',
data: this.get('data')
}],
So, that is how you render a Highchart.js into a component :)
Okay, so I've been at this all day and can't figure out why the grid is loading all records instead of the pageSize: 25 limit I configured on the store. The paging toolbar is rendering the correct pages, but the grid is what is autoloading all records. I'm thinking it is because of the way my controller is loading the view. I have my .cfc server side processing setup correctly using the paging_on, start, limit, sort and dir in my arguments. If anyone can help me out, it would be greatly appreciated.
Here is my controller:
onAccountActivityListAfterrender: function(pnl, eOpts) {
var store = this.getStore("AccountSessions");
store.load({
params : {
start : 0,
limit : 25
},
callback: function (recs, op, success) {
if (!success) {
Ext.Msg.alert("Error!", op.error[0].ERROR);
}
var grid = Ext.getCmp('pnl-accountactivity-list');
grid.getStore().add(store.getRange());
this.showApp(pnl);
},
scope: this
});
},
and here is my store:
Ext.define("EXAMPLE.store.AccountSessions", {
alias: "store.AccountSessions",
extend: "Ext.data.Store",
model: "EXAMPLE.model.AccountSession",
pageSize: 25,
proxy: {
api: {
create : undefined,
read : "ajax/account.cfc?method=account_sessions",
update : undefined,
destroy : undefined
},
extraParams: {
account_id: account
},
reader: {
messageProperty: "ERRORS",
root: "DATA",
successProperty: "SUCCESS",
totalProperty: "TOTAL",
type: "json"
},
type: "ajax"
}
});
You'd better to show the server-side codes.
Make sure the values that returned correctly~