I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],
Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}
Related
Currently, I am creating quickcharts line graphs and attached it to my mail body. But the dataset is fetched using a mysql query and the dataset changes time to time. Here is my sample code.
$chartConfig = "{
type: 'line',
data: {
labels: [$date_array2],
datasets: [{
data: [$value_array2],
backgroundColor: ['#F5DEB3'],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'UGW Max Daily Throughput, in Gbps',
},
legend: {
display: false
},
}
}";
In here both $date_array2 and $value_array2 are fetched using a mysql query. But now I need to make a scale to visualize this graph more clear, so I dont want to start the graph with zero. But I could not make min and max values since the dataset is changing day by day. What I need to do is, I need to check the dataset(only 7 day) and idenitify the min and max values and adjust the y axis. I have read https://www.chartjs.org/docs/2.9.4/charts/line.html but couldnot find a proper solution.. Can someone propose a method to do this?
I need format label in the markline. Is possible add image backround, or in general custom styling?.
Is possible draw the markLine over the candles?, because at the moment when the markline goes down, the candles cover the label.
I would like to do something like what is shown this picture:
EDIT:
This is my actual code
m.setOption(
{
series: {
markLine: {
symbol: 'none',
label:
{
position: 'middle',
show: true,
},
lineStyle: {
color: mc,
//type: 'solid'
},
data: [{yAxis: window.wsData[1], name: 'Tiker'}],
position: 'insideStartTop'
}
}
}
)
This labels has limit to improve deep custom design. By my opinion it's right decision because many developers don't understand design and other people will frustrate due incorrect style, color, position... But we are developers and no one can interfere with our love for real art, hehe )
Try to implement this options: https://stackoverflow.com/a/64875984/1597964
I am visualizing multiple dataset on a Chart JS. Whenever I enable/disable a dataset. This dataset would create an instance of its data. On my case, it is xAxes.
and when I enable another dataset:
I want to disable creating another instance of xAxes and every it would share the same fixed axes.
xAxes: [{
type: 'time',
distribution: 'linear',
ticks: {
source: 'data'
},
time: {
parser: 'HH:mm:ss',
unit: 'hour',
unitStepSize: 1,
//min: '00:00:00',
//max: '23:59:59'
}
}],
Update: 1
I used round: 'hour', to include in xAxes.time. It looks fixed. However, I don't know why points always go to corners and spread freely with time as shown:
Update: 2
I removed
/*ticks: {
source: 'data'
},*/
Now it is scaled.
Removing the
ticks: {
source: 'data'
},
made the graph scaled with time.
I have generated a graph inside highstock (see example - http://jsfiddle.net/szFQa/),
however, by default, it groups data that is chronologically close together, and stops the timeline from showing time in a linear form.
I've tried using the following options, there seems to be no change though.
plotOptions : {
series : {
dataGrouping : {
enabled : false
},
}
},
What options need to be set to stop the grouping and show the timeline as linear?
In case when you disable dataGrouping like this http://jsfiddle.net/szFQa/1/ then points are not grouped, because in your data you have 16 points and on the chart is also 16 points.
plotOptions: {
series: {
dataGrouping:{
enabled:false
},
marker: {
enabled: true
}
}
},
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.