Is there any way to give padding from the Y-axis so that there is a gap from the gridlines? I achieved this with a transparent border and ticks border. Also, How Can I customize the length of the tick indicator.
Targeted Graph Design => https://i.ibb.co/gFJVyBQ/image.png
Current Graph Design => https://i.ibb.co/LNtgTtT/image.png
my graph config code:
const config = {
type: "line",
data: data,
options: {
animations: {
tension: {
duration: 1000,
easing: "linear",
to: 0.3,
from: 0,
},
},
interaction: {
intersect: false,
},
elements: {
point: {
radius: 1,
hoverRadius: 4,
hitRadius: 10,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: externalTooltipHandler,
},
},
scales: {
yAxes: {
grid: {
color: "#ACB8BE",
borderColor: "rgba(0,0,0,0)", //transparent border
},
position: "right",
//How to add padding to this AXES?
min: 1.0,
max: 2.0,
ticks: {
stepSize: 0.1,
padding: 30, //padding form the axis
//How to customize the length of the ticks indicator?
},
},
xAxes: {
grid: {
offset: true,
display: false,
},
},
},
},
};
I have tried creating new custom axes but didn't find any luck there. Can anyone suggest to me how to add this customization?
Related
I would like to use mirror option in order to show y-axis value "inside" the graph:
now the problem is the x-axis should start after those values but I can't move them.
The chart is build with following code:
this.chart = new Chart(this.canvas.nativeElement, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
color: '#333',
font: {
weight: 'bold'
},
maxRotation: 0,
maxTicksLimit: this.loadLabels()?.length / 2
},
bounds: 'ticks'
},
y: {
type: 'linear',
beginAtZero: true,
stacked: true,
title: {
display: false,
},
display: true,
grid: {
display: true,
drawBorder: false,
lineWidth: 1,
borderColor: 'rgb(244, 244, 244, 0.7)',
color: 'rgb(244, 244, 244, 0.7)'
},
ticks: {
display: true,
maxTicksLimit: 5,
mirror: true,
callback: (val) => formatCurrency(+val, 'it', getCurrencySymbol(this.currency, 'narrow'), this.currency)
}
}
}
},
});
I tried both padding and grace options without success.. Anyone knows how to do it?
You can define y.ticks.padding as follows:
y: {
ticks: {
...
padding: -50
}
}
Together with this, you also need to define layout.padding.left to make sure, the tick labels still appear on the canvas.
options: {
layout: {
padding: {
left: 100
}
}
...
Obviously you need to adapt the numbers to your needs.
For further information, please consult Tick Configuration and Padding from the Chart.js documentation.
I'm trying to represent in a real timeline chart the input from a user's microphone in hertz (corresponding to each musical note from the second octave to the 6th). I'm trying to achieve something like: this
Right now I got: this. If I use the formatter function I get: this.
My problem is that I need to replace the hertz value for the octave scale (A2, B2, C2, D2, E2, F2, G2 and so on) on the Y-axis.
My config:
const initialOptions = {
chart: {
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 20,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: true,
type: "x",
autoScaleYaxis: true,
zoomedArea: {
fill: {
color: "#90CAF9",
opacity: 0.4,
},
stroke: {
color: "#0D47A1",
opacity: 0.4,
width: 1,
},
},
},
},
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
width: 0.99,
opacity: 1,
},
markers: {
size: 0,
},
plotOptions: {
bar: {
horizontal: false,
},
},
legend: {
show: false,
},
dataLabels: {
offsetX: 0,
enabled: true,
},
xaxis: {
show: true,
categories: [0],
tickAmount: 10, // optional tickAmount value
},
};
And I have tried updating the options on a useEffect like this:
yaxis: {
tickAmount: 1,
labels: {
enabled: true,
formatter: function (val, index) {
return currentNote; // This prints the same output on each line of the Y axis as in picture 2
},
},
},
I've been stuck on this for days now and I'm not sure if I should move on to another library. Any suggestions welcomed!
I have created a Radar chart with 360 labels; for each degree one. But I don't want to show them all on the scale. How can skip ticks?
I would like to skip some labels on the x-axis because there are too many points. I have tried all the following settings. Can any body please help me?
I have tried to make the labels empty in the array, but then the tooltip those not work
I tried both make the font-size smaller as well as skipping ticks:
{
type: 'radar',
pointDot: false,
scaleOverride: true,
scaleSteps: 4,
scaleStepWidth: 5,
scaleStartValue: 0,
data: {
labels: [],
datasets: []
},
options: {
elements: {
line: {
tension:0,
borderWidth:3
}
},
scales: {
ticks: {
max: 100,
fontSize: 6,
autoSkip: true,
stepSize:50
},
gridLines: {
display: false
},
pointLabels: {
fontSize: 6
}
},
legend: {
display: false,
labels: {
fontSize: 6
}
},
labels: {
fontSize: 6
}
},
pointLabelFontSize: '6px'
}
I have ChartJS version 2.5.0
The result is as follows:
Output of graph
I am trying to add custom array of colors to the flot input. But when I try to draw multiple graphs in same page. Some graphs doesnt take the input color array and goes with the default set of colors. The below are the options used, where colorPalette is the custom color array used. Any idea when the flot rejects input color array and when it takes.
var options = {
colors: colorPalette,
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5,
position: 'nw'
},
yaxes: [
{
min: 0,
labelWidth : yAxisLabelWidth
},
{
alignTicksWithAxis: 1,
position: 'right',
min: 0,
labelWidth : yAxisLabelWidth
}
],
xaxis: {
mode: "time",
tickLength: 0
},
grid: {
borderWidth: 1,
borderColor: "#cccccc",
labelMargin: 10,
hoverable: true,
mouseActiveRadius: 8
},
stack: null,
bars: {
show: true,
align: 'center',
lineWidth: 1
},
multiplebars: true
};
I'm using 'Categories' mode to display labels. It works fine with small number of datas on graph but when I have more than 100 of datas there is no way to see the labels. Is there any solution for flot js ?
Graph with more datas will be like :
Below is the options I'm using to display the graph :
var stackOptionSeries = { stack: true, bars: { show: true, barWidth: 0.4, align: 'center',lineWidth: 1.5, fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.8 } ] } } };
var options = {
grid:{ hoverable: true,
clickable: true,
autoHighlight:true,
backgroundColor: 'white',
borderWidth:1,
borderColor:"rgba(0,0,0,0.1)",
tickColor:'#FAFAFA'},
series: stackOptionSeries,
legend: {
show: true,
position: "ne",
noColumns: 1
},
xaxis: {
mode: "categories",
tickLength: 0,
panRange: [-0.2, maxXaxisRange+0.2]
},
yaxes: [{ min: 0,ticks:7, panRange: [0,null], zoomRange: false }, {
position: "right",
autoscaleMargin: 1,
ticks:4,
min: 0,
max: 100,
panRange: [0,null],
zoomRange: false
}],
pan: {
interactive: true,
frameRate: 80
},
tooltip: true,
tooltipOpts: {
content: "%y %s, %x", // show percentages, rounding to 2 decimal places
shifts: {
x: 10,
y: 10
},
defaultTheme: false
}
};
Hei
How about using angled labels? then the labels should not show on top of each other.
xaxis: {
labelAngle: 45}
http://jsfiddle.net/manishsp2008/vNSD8/
Hope it helps