Im trying to explicitly set the min value for the x axis but for some reason the chart still uses 0 instead of the value im providing.
standAloneChartOptions = {
container: document.getElementById('myChart'),
autoSize: true,
data: someData,
series: [
{
xKey: 'foo',
yKey: 'bar',
yName: 'Bar',
stroke: '#03a9f4',
marker: {
fill: '#03a9f4',
stroke: '#0276ab',
},
tooltipEnabled: false,
}
],
axes: [
{
type: 'number',
position: 'top',
title: {
enabled: true,
text: 'Foo'
},
min: 50,
max: 1000,
tick: {
count: 20
}
},
{
type: 'number',
position: 'left',
},
],
legend: {
position: 'bottom',
},
};
the max value is set accordingly so im confused as to what im doing wrong, would much appreciate the help, thanks!
Related
I am trying to load annotation the dynamic chart that I create after receiving data from the database and I have tried all possible options but somehow the chart loads but no the annotations.
chart.js version = v2.9.4
chart-plugin-annotation.min.js version = 0.5.7
Function in JS that runs when data is receiving from db:
function DrawChart(timeLabelList, unitsProducedList, goalList){
if(draw_the_chart != null) draw_the_chart.destroy();
Chart.defaults.global.defaultFontColor = 'white';
var ctx = document.getElementById('draw_the_chart').getContext("2d");
draw_the_chart = new Chart(ctx, {
type: 'line',
//plugins: [ChartAnnotation],
data: {
labels: timeLabelList,
datasets: [
{
label: 'Goal',
yAxisID: 'A',
data: goalList,
//backgroundColor: chartColumnColorBlueSolid,
borderColor: chartColumnColorGreenSolid,
borderWidth: 2,
pointStyle: 'star'
}]
},
options: {
annotation: {
annotations: [
{
id: "a-line-1",
type: "line",
mode: "vertical",
scaleID: "y-axis-0",
value: "1",
borderColor: "red",
borderWidth: 2
}
]
},
legend: {
position: 'bottom',
display: true,
},
elements: {
line: {
tension: 0
}
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'hour'
},
}],
yAxes: [{
stacked: false,
id: 'A',
type: 'linear',
position: 'right',
}]
},
}
});
}
I tried all possible ways to register and also different ways to used the plugin but had no luck plotting it. I even used latest CDN versions but had no luck.
Can anyone help with it.
Thanks!
I have a line type eCharts graph and I want to fill the area between the line and the y axis.
The default area filling behaviour happens vertically, the chart fills out the space between the line and the x axis.
I know I can swap axes in other chart libraries but doesn't look like an option here in eCharts.
These are the options I'm using to set up the chart:
const options = {
tooltip: {
show: false
},
grid: {
show: true,
top: 0,
bottom: 40,
left: 50,
right: 10,
},
xAxis: {
id: 'x',
type: 'value',
min: 0,
max: 4,
},
yAxis: {
id: 'y',
type: 'value',
inverse: true,
min: range?.min,
max: range?.max,
axisLine: {
show: true
},
splitLine: {
show: true
},
axisTick: {
show: true
}
},
series: {
type: 'line',
xAxisId: 'x',
yAxisId: 'y',
symbol: 'none',
smooth: true,
connectNulls: false,
// 2d array like [[1,1000], [3, 1250], ...]
data: filteredData.data,
lineStyle: {
color: '#f00',
},
areaStyle: {
color: '#f00',
origin: 'auto'
}
}
};
Thanks.
Ok, looks like treating the y axis type as a category instead of value and removing the y axis boundaries did the trick.
yAxis: {
id: 'y',
type: 'category', // category and not value
// y axis boundaries removed
...
Outcome after these changes:
I tried to put the legend title with its color code at the bottom of the chart before a load of data.
Here is the code I tried. Kindly let me know the corrections to be made.
var options = {
series: [],
chart: {
height: 350,
type: 'line',
toolbar: {
show: true
},
zoom: {
enabled: false,
}
},
legend: {
show:true,
position: 'bottom',
floating: true,
verticalAlign: 'bottom',
align:'center'
},
tooltip: {
shared: true
},
colors: ['#77B6EA', '#545454'],
dataLabels: {
enabled: true
},
Here is the image of display
The crux of the problem is: how does ApexCharts know what to show in the legend if you don't provide any data.
Assuming you know what the series will be called, you can still provide empty series even if you have no data:
series: [
{
name: "Series 1",
data: []
}
]
If you have only one series, you'll also need to change the value for showForSingleSeries from the default false to true:
legend: {
showForSingleSeries: true
}
On a side note, you can also drop the show and position legend attributes as they're the same as the defaults. You might also want to remove the verticalAlign and align attributes as they're not included in the documentation.
You should check out their api.
https://apexcharts.com/docs/options/legend/
const options = {
...
legend: {
show: true,
position: 'bottom',
},
labels: ['value 1', 'value 2', 'value 3', 'value 4']
...
}
const data = []
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'bottom',
horizontalAlign: 'center',
floating: false,
fontSize: '14px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
formatter: undefined,
inverseOrder: false,
width: undefined,
height: undefined,
tooltipHoverFormatter: undefined,
customLegendItems: [],
offsetX: 0,
offsetY: 0,
labels: {
colors: undefined, useSeriesColors: false
}
,
markers: {
width: 12, height: 12, strokeWidth: 0, strokeColor: '#fff', fillColors: undefined, radius: 12, customHTML: undefined, onClick: undefined, offsetX: 0, offsetY: 0
}
,
itemMargin: {
horizontal: 5, vertical: 0
}
,
onItemClick: {
toggleDataSeries: true
}
,
onItemHover: {
highlightDataSeries: true
}
,
}
I work on SilverStripe 4 and usign Chart js (barchart) and the gridLine is don't show. here my code
var ctx = document.getElementById("plradar").getContext("2d");
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Degre'
},
scale: {
ticks: {
beginAtZero: true,
min: 0,
max: 5,
stepSize: 1
},
pointLabels: {
fontSize: 12
}
},
elements: {
point: {
radius: 3
}
}
}
});
as the result
Can someone advise how to change my code?
I am trying to implement a Highchart line graph with a datetime x axis on an EXTJS 3 panel so I am using extjs adapter and all the stuff provided on Sencha forums.
I am facing a very weird problem. All tick labels on my x axis are in the same position so they overlap, as seen here:
Here is the code I am working with:
var store = new Ext.data.JsonStore({
url: '/graph',
fields: [
{name: 'datamesura', type: 'int'},
{name: 'despl_hor', type: 'float'},
{name: 'despl_ver', type: 'float'}
],
root: 'dades'
});
var datastore_task = {
run: function() {
store.load();
}
};
Ext.TaskMgr.start(datastore_task);
Ext.QuickTips.init();
var chart;
chart = new Ext.ux.HighChart({
series: [{
type: 'spline',
dataIndex: 'despl_hor',
name: 'Desplaçament horitzontal'
},{
type: 'spline',
dataIndex: 'despl_ver',
name: 'Desplaçament vertical'
}],
height: 500,
width: 700,
store: store,
animShift: true,
xField: 'datamesura',
chartConfig: {
chart: {
marginRight: 210,
marginBottom: 120,
zoomType: 'xy'
},
toolbar: {
itemStyle: {
color: '#4572A7',
cursor: 'pointer'
},
layout: {
xPosition: 'right',
yPosition: 'top',
x: 0,
y: -10
}
},
title: {
text: 'Prismes',
x: -20
},
subtitle: {
text: 'Desplaçament',
x: -20
},
xAxis: [{
title: {
text: 'Data',
margin: 20
},
labels: {
rotation: 270,
y: 35
},
type: 'datetime'
}],
yAxis: [{
title: {
text: 'Valor'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
borderWidth: 0
}
}
});
new Ext.Window({
title: 'Example',
layout: 'anchor',
items: [chart]
}).show();
Graph and time scale are being rendered properly. Even dates are correct in tooltips when I rollover any point. But as you see, all labels are in the beginning of x axis.
Data is coming from a JSON file in a format like this:
{"dades":[{"datamesura":1305158400000,"despl_hor":0,"despl_ver":0},{"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575},{"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951},{"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125},{"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962},{"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417},{"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156},{"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012},{"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418},{"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489},{"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418},{"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682},{"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224},{"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066},{"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109},{"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831},{"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524},{"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529},{"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538},{"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064},{"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857},{"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535},{"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894},{"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553},{"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379},{"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981},{"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039},{"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294},{"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485},{"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496},{"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985},{"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077},{"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327},{"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387},{"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425},{"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147},{"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697}]}
Does anyone have a clue? I am about to give up and try another charting library even though I like Highcharts very much.
This seems like an issue w/the span of the x-axis. I'm not at all familiar w/the ExtJS adapter but I would suggest looking into any of these:
Could your options be pointing to the wrong field?
Using the series.pointStart/series.pointInterval controls
Using the xAxis setExtremes controls