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
Related
i want to show the percentage at the chart, i tried to use tooltips but it's not working.
i'm using vue 2
polar chart
the code:
Codesandbox
polarChart: { options: { responsive: true, maintainAspectRatio: false, responsiveAnimationDuration: 500, yaxis: { show: true,
},
legend: { position: 'right', labels: { padding: 25, boxWidth: 10, showActualPercentages: true, fontSize: 15,
},
}, tooltips: { callbacks: { shadowOffsetX: 1, shadowOffsetY: 1, shadowBlur: 8,
},
}, scale: { scaleShowLine: true, scaleLineWidth: 1, ticks: { display: false,
}, reverse: false, gridLines: { display: false,
},
}, animation: { animateRotate: false,
},
},
chartData: { labels: ['Africa', 'Asia', 'Europe'],
The data -----
datasets: [
{ label: 'Population (millions)', ba
ckgroundColor: [
'#836AF9',
'#ffe800',
'#28dac6',
'#ffe802',
'#FDAC34',
'#299AFF',
'#4F5D70',
'#2c9aff',
'#84D0FF',
'#EDF1F4',
], data: [3141, 3132, 2112],
borderWidth: 0,
},
],
},
i tried to use tooltips but it does not working.
i want that the chart show the percentage and the value.
I'm using highcharts do draw some markers, and I really need not to show the line between them. I know that I can accomplish that by dividing the series, but I would like to ask to the community if there is another way.
I have already tried lineWidth = 0, but it keeps drawing a thin line between points.
Line width
Line marker
To better exemplify, I built the following jsFiddle:
https://jsfiddle.net/L0gkwfxs/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
animation: {
duration: 5000
},
lineWidth: 0,
name: 'Sensor',
color: 'RGBA(255,0,47,0.6)',
data: [
[
2000.5,
5601,
5603
],
[
2000.5,
6815,
6817
]
],
dataLabels: {
enabled: false
},
marker: {
enabled: true,
radius: 6,
symbol: "triangle-down"
},
enableMouseTracking: true
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Can anyone help me?
Thanks in advance!
This behaviour occurs due to lineWidthPlus option which as default adds one-pixel to the hovered line width.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/jonL1ymg/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover
Another solution, which I recommend, is just using scatter series which shows only markers by default.
Demo:
https://jsfiddle.net/BlackLabel/k6Lsu2a0/
API Reference:
https://api.highcharts.com/highcharts/series.scatter
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?
My points do not appear centered with the grid line of the x-axis as visible in the screenshot below:
The options I am using are as follows:
var options = {
grid: {
show: true,
aboveData: false,
color: "#3f3f3f",
labelMargin: 10,
axisMargin: 0,
borderWidth: 0,
borderColor: null,
minBorderMargin: 5,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 100
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {
show: true,
radius: 4.5,
symbol: "circle",
lineWidth: 3.0
}
},
legend: {
position: "ne",
margin: [0, -15],
noColumns: 0,
labelBoxBorderColor: null,
labelFormatter: function(label, series) {
// just add some space to labes
return label + ' ';
},
width: 40,
height: 1
},
colors: chartColours,
shadowSize: 0,
tooltip: true, //activate tooltip
tooltipOpts: {
content: "%s: %y.0",
xDateFormat: "%d/%m",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
},
yaxis: {
min: 0,
tickDecimals:0
},
xaxis: {
mode: "time",
minTickSize: tickSize,
timeformat: tformat,
min: chartMinDate,
max: chartMaxDate
}
};
My data set is a time-series, and the labels values is also coming from the same data set so the dates should line up with the points. However it is offset while no option for this exists. What am I doing wrong?
I got the solution from this link
points aren't aligned with the x axis on flot chart
And
https://code.google.com/archive/p/flot/issues/608
It seems Flot chart requires the time in UTC format.
For me it worked by just adding the "timezone:"browser"" in "xaxis".
After addition, my "xaxis" looks like below :
xaxis: {
mode: "time",
minTickSize: [1, "day"],
timeformat: "%d-%b-%y",
timezone:"browser",
min: min date value define here,
max: max date value define here
}
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
};