I am creating a some charts with billboard.js and stumbled upon some overflow logic i can't sort out.
Case: A simple linechart w/o labels on y-axis (these will be solved on a container level and not in the chart). I want the chart to have zero padding on x, to make it take upp the full width.
Issue: If the y-ticks are all 0, or something below 10 the x-ticks text will be cropped, thus not displaying it's full text on the first or last tick.
bb.generate({
bindto: "#chart",
grid: {
y: {
show: true
},
x: {
show: false
}
},
area: {
linearGradient: true
},
data: {
x: "x",
columns: [
[
"x",
"2022-10-23T07:31:00Z",
"2022-10-23T07:32:00Z",
"2022-10-23T07:33:00Z",
"2022-10-23T07:34:00Z",
"2022-10-23T07:35:00Z",
"2022-10-23T07:36:00Z",
"2022-10-23T07:37:00Z",
"2022-10-23T07:38:00Z",
"2022-10-23T07:39:00Z",
"2022-10-23T07:40:00Z",
"2022-10-23T07:41:00Z",
"2022-10-23T07:42:00Z",
"2022-10-23T07:43:00Z"
],
[
"yTicks",
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
],
types: {
yTicks: "area"
}
},
axis: {
x: {
tick: {
format: "%H:%M:%S",
fit: false
},
type: "timeseries",
padding: {
left: 0,
right: 0
}
},
y: {
padding: {
bottom: 0
},
tick: {
show: false,
}
},
line: {
zerobased: true
},
},
legend: {
show: false
},
});
Link to codepen
So is there a way to let the chart use all available width (padding 0 on x-tick) and display the full tick-text without setting y-label? Something like an overflow setting in plain css, but can't figure out a correct solution for svgs.
The first & last tick text can be hidden when the tick's position are set close to the edge. In this case, tick text can't be fully visible.
The easiest way to solve this, is giving some left/right padding.
Checkout the example.
bb.generate({
size: {
width:500
},
padding: {
left: 20,
right: 20
},
grid: {
y: {
show: true
},
x: {
show: false
}
},
area: {
linearGradient: true
},
data: {
x: "x",
columns: [
[
"x",
"2022-10-23T07:31:00Z",
"2022-10-23T07:32:00Z",
"2022-10-23T07:33:00Z",
"2022-10-23T07:34:00Z",
"2022-10-23T07:35:00Z",
"2022-10-23T07:36:00Z",
"2022-10-23T07:37:00Z",
"2022-10-23T07:38:00Z",
"2022-10-23T07:39:00Z",
"2022-10-23T07:40:00Z",
"2022-10-23T07:41:00Z",
"2022-10-23T07:42:00Z",
"2022-10-23T07:43:00Z"
],
[
"yTicks",
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
],
types: {
'yTicks': "area"
}
},
clipPath: false,
axis: {
x: {
clipPath: false,
tick: {
format: "%H:%M:%S",
fit: true,
//count:2,
values: [
// "2022-10-23T07:31:00Z",
"2022-10-23T07:32:00Z",
//"2022-10-23T07:33:00Z",
//"2022-10-23T07:34:00Z",
//"2022-10-23T07:35:00Z",
"2022-10-23T07:36:00Z",
//"2022-10-23T07:37:00Z",
//"2022-10-23T07:38:00Z",
//"2022-10-23T07:39:00Z",
"2022-10-23T07:40:00Z",
//"2022-10-23T07:41:00Z",
//"2022-10-23T07:42:00Z",
"2022-10-23T07:43:00Z"
],
},
type: "timeseries",
padding: {
left: 0,
right: 0
}
},
y: {
show: false
},
line: {
zerobased: true
},
},
legend: {
show: false
},
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/datalab.min.css">
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Related
I have a highchart table, I want to apply a gradient for underneath the graph line for each data set. Each data set already has the line coloured differently, but it seems impossible to apply a gradient color for each dataset.
I cannot apply areaSpline for each series of the chart:
c.series?.forEach((s, index) => {
s.type = 'areaspline';
s.color = colors.spline[index];
});
c.chart = { type: 'areaspline' };
c.plotOptions = {
series: {
stacking: isStacked ? 'normal' : undefined,
connectNulls: true,
marker: {
enabled: false,
radius: 14,
},
},
areaspline: {
// fillOpacity: 0.5,
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'transparent'],
],
},
},
};
Any idea on how to achieve that?
You need to define the gradient for each series, not in plotOptions. For example:
series: [{
...,
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'blue'],
[1, 'transparent'],
]
}
}, {
...,
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'transparent'],
]
}
}]
Live demo: http://jsfiddle.net/BlackLabel/kczgb4Lv/
API Reference: https://api.highcharts.com/highcharts/series.areaspline.fillColor
I'm trying to hide yAxis labels. I tried display: false property, but that didn't work.
My code below:
export const options = {
responsive: true,
interaction: { includeInvisible: true, intersect: false },
tooltip: {
backgroundColor: "rgba(0, 0, 0, 0.3)",
displayColors: false,
multiKeyBackground: "rgba(0, 0, 0, 0)",
},
scale: {
y1: {
min: 0,
ticks: {
count: 5,
},
grid: { borderDash: [3], color: "rgb(126,126,126)", tickLength: 0 },
},
y2: {
display: false,
position: "right",
max: Math.max(...BTCPrices.map((el) => el.Volume)) * 10,
ticks: {
count: 5,
},
},
x: {
ticks: {},
},
},
plugins: {
legend: {
display: false,
},
},
};
here's the image describing the problem:
Thanks for helping!
This is because your config is not getting picked up, you putted your scale config in the options.scale namespace white it needs to be configured in the options.scales so you need to add an extra s at the end
This is how I manage to get rid of the labels, I think in your case instead of Y its gonna be y2
y: {
ticks: {
display: false, //this will remove only the label
},
},
I have figured out how to set the size for an annotation individually:
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 50,
xAxis: 0,
yAxis: 0
},
height: 100,
shape: "rect",
text: "test",
verticalAlign: "bottom"
}
]
I would like it to position between 50 and 150. How can I achieve that?
And additionally, I would like the text to be aligned in the center of the box?!
You can calculate the height by using toPixels method. You have to also take a padding into account. To center the text you can use asynchronous function, because annotations do not exist in load event yet.
chart: {
events: {
load: function() {
const chart = this;
const height =
chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);
chart.addAnnotation({
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 150,
xAxis: 0,
yAxis: 0
},
y: 0,
padding: 0,
height: height,
shape: "rect",
text: "test",
verticalAlign: "top"
}
]
});
}
}
}
Live demo: https://codesandbox.io/s/qqqkx2zr49
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
I want to change the origin of the c3 bar graph from zero to one.All the values must be drawn from one not from zero.For better understanding i have attached an image.
There is no config/easy way to change the origin from (0,0) to something different(0,100).
So the alternate/easy way to do this is by changing the axis tick labels and putting grid lines, and manipulating the data values, as shown below:-
In below example, I have tried to move the origin(x-axis from 0 to 100)
Hope this helps.
var chart = c3.generate({
bindto:'#chart_example',
data: {
columns: [
//['data1', 0, 200, -100, 400, 150, -250, 50, 100, 250] // Actual values
['data1', -100, 100, -200, 300, 50, -350, -50, 0, 150] // actual values -100
],
type: 'bar'
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
show: false,
},
y : {
tick: {
//format: d3.format("$,")
format: function (d) { return "$" + (d+100); }
}
}
},
grid: {
y: {
lines: [
{value: 0, text: ''},
]
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div id="chart_example"/>
I am working with angularjs highcharts-ng
https://github.com/pablojim/highcharts-ng
I need to add a custom button to the speedometer.
I've found this:
Add buttons in chart of Highcharts at runtime
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
}
But it is not working to me:
$scope.highchartsNG = {
options: {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
}
},
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
},
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
buttons: {
customButton: {
text: 'Custom Button'
}
}
,
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}],
};
http://jsfiddle.net/76dLm8h7/3/
I've tried to add the "exporting" option in different possitions inside the array, but It does'nt work.
Any help will be appreciate.
Thanks in advance.