I'm moving away from the highcharts-vue package because the "new" composition API works perfectly fine with Highcharts without any external package.
I am however facing problems trying to add new data to the chart
This is my current chart:
Code: Select all
testChart.value = Highcharts.chart('container', {
renderTo: 'container',
chart: {
type: "area",
backgroundColor: "rgba(0,0,0,0)",
maxHeight: 300,
minHeight: 200,
boost: {
useGPUTranslations: true,
seriesThreshold: 5
},
zoomType: "xy",
animation: false,
},
title: {
text: ''
},
exporting: {
enabled: false,
},
navigator: {
maskInside: true,
outlineColor: "0px",
xAxis: {
labels: {
align: "center",
// x: 10,
// y: 12,
style: {
border: "transparent",
color: props.dataset.theme === "light" ? "#374151" : "#fff",
},
},
},
},
rangeSelector: {
allButtonsEnabled: false,
dropdown: "never",
inputEnabled: false,
enabled: false,
buttonTheme: {
visibility: "hidden",
},
labelStyle: {
visibility: "hidden",
},
},
legend:{
enabled:false
},
credits: {
enabled: false,
},
scrollbar: {
enabled: true,
barBackgroundColor: "transparent",
barBorderWidth: 0,
buttonBackgroundColor: "transparent",
buttonBorderWidth: 0,
buttonArrowColor: "transparent",
rifleColor: "transparent",
trackBackgroundColor: "transparent",
trackBorderColor: "transparent",
},
xAxis: {
title: {
text: ''
},
crosshair: {
width: 1,
color: "gray",
dashStyle: "Dash",
label: {
shape: "square",
backgroundColor: "gray",
enabled: true,
formatter: (e) => {
return DateTime.fromJSDate(new Date(e)).toFormat('LLL dd yyyy hh:mm:ss');
},
},
},
type: "datetime",
lineColor: props.dataset.theme === "light" ? "#d1d5db" : "#374151",
labels: {
align: "center",
reserveSpace: true,
style: {
color: props.dataset.theme === "light" ? "#6f7784" : "#ced1d6",
fontSize: "11px",
},
},
},
yAxis: [
{
title: {
text: ''
},
min: lowestDatasetY.value.y,
offset: 10,
type: props.dataset?.options?.yAxis?.type ?? 'linear',
crosshair: {
snap: false,
width: 1,
color: "gray",
dashStyle: "Dash",
label: {
useHTML: true,
enabled: true,
shape: "square",
backgroundColor: "gray",
formatter: (e) => {
return getCrosshairYFormatter(e);
},
},
},
opposite: false,
gridLineColor: props.dataset.theme === "light" ? "#d1d5db" : "#374151",
labels: {
align: "right", // Why the fuck do i need to put it opposite of where i want it?
style: {
color: props.dataset.theme === "light" ? "#6f7784" : "#ced1d6",
fontSize: "11px",
},
},
plotLines: [{
color: '#eeb919',
width: 0.5,
dashStyle: 'Dash',
value: firstDataset.value,
label: {
useHTML: true,
align: "right",
enabled: true,
formatter: () => {
return getPlotYFormatter(firstDataset.value);
},
},
}]
},
],
tooltip: {
outside: true,
formatter: function () {
if (emitHoverEventTimeout.value === undefined){
emitHoverEventTimeout.value = window.setTimeout(() => {
// todo - check if it is neccesary to emit the whole this.. maybe just this.point.options i use props.dataset.datapoints.y
// however maybe construct a smaller object with the neccesary values
emit('hoverChart', this.point.options);
emitHoverEventTimeout.value = undefined;
}, 50);
}
},
},
series: [
{
name: "Price",
yAxis: 0,
turboThreshold: testData.value.length,
threshold: Number(firstDataset.value),
boostThreshold: 1,
data: testData.value,
zones: [
{
value: Number(firstDataset.value),
color: '#ff6968',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, "rgba(255, 105, 104, 0)"],
[1, "rgba(255, 105, 104, 0.3)"],
],
},
threshold: Infinity,
},
{
color: '#94caae',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, "rgba(34, 197, 94, 0.3)"],
[1, "rgba(34, 197, 94, 0)"],
],
},
threshold: 0
}
],
states: {
hover: {
enabled: true,
lineWidth: 2,
},
},
},
],
});
However in vue I have a watcher watching, and I'm trying to add a second dataset when that is triggered, Im trying to do it like this:
Code: Select all
testChart.value.yAxis.push({
min: lowestComparedY.y,
offset: 25,
type: props.dataset?.options?.yAxis?.type ?? 'linear',
opposite: true,
gridLineColor: cookieGet("theme") === "light" ? "#d1d5db" : "#374151",
});
testChart.value.series.push({
name: `Price '${props.dataset.comparedAsset.symbol}'`,
yAxis: 1,
turboThreshold: newData.length,
threshold: Number(newData.y),
boostThreshold: 1,
data: newData,
color: '#f0ba19',
states: {
hover: {
enabled: true,
lineWidth: 2,
},
},
});
I have tried to use : testChart.value.redraw();
And tried to do setData instead of push
Can someone tell me what i am doing wrong?