We Keep Coding

How to display single data-values with ApexCharts correctly?

I am currently trying to build a barchart with ApexCharts. Everything works fine when the data-array has more than one entry. Somehow, whenever data only contains one element, the diagram messes up the width of the bar.
Correct state with multiple entries:
Buggy state with one entry
My goal is to display a single value with the same xaxis scale and the same barwitdh as the barchart displays multiple values.
I already tried using an array of timestamps for each hour as catigories-prop but this didn't work for me.
I use 'dateime' as type for my xaxis.
Data is an array that can contain 0, 1 or x entries. It is given to the Barchart-Component as data-prop.
Categories contains a the timestamp to each entry of data. Therefore it can also have 0, 1, or x values. Categories is used as the Barcharts categories-prop.
Here are my configurations (For the buggy state):
var options = {
series: [
{
name: "Servings",
data: [[1669082400000, 44]]
}
],
chart: {
height: 350,
type: "bar",
animations: {
enabled: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false,
datetimeFormatter: {
year: 'yyyy',
month: 'MMM',
day: 'dd',
hour: 'HH:mm'
}
},
categories: [
1669082400000,
],
min: 1669075200000,
max: 1669161600000
},
tooltip: {
intersect: false,
shared: true
},
yaxis: {
reversed: false,
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Would be nice if somebody could help me out, I'm tripping over this one.

How to get values from all the charts in the tooltip you are currently hovering

I am using Highcharts in the vue.js environment. I use https://www.highcharts.com 7.2.0 and Highcharts-Vue https://github.com/highcharts/highcharts-vue#readme 1.3.5.
I have multiple highstock charts in the same page. I am trying to get the values from all the charts into the tooltip of the highstock that I am currently hovering.
Based on this http://jsfiddle.net/mjsdnngq/14/ I am trying to create my code
This is what I have now
vue template
<template>
<div class="vessChart" v-on:mousemove="updateCoordinates" >
<v-card :loading=!this.getStreamPlots.done>
<highcharts ref="chart" :constructor-type="'stockChart'" :callback="chartcallback" :options="options" ></highcharts>
</v-card>
</div>
</template>
This is the "options" as I define it for the chart as a vue data object
options: {
tooltip: {
shared: true,
pointFormat: '{series.name}: {point.y}<br>'
},
chart: {
type: "line",
zoomType: 'x'
},
title: {
text: this.streamChart.title
},
rangeSelector: {
inputEnabled: false
},
xAxis: {
ordinal: false,
type: 'datetime',
tickInterval: 5 * 60 * 1000 ,
labels: {
enabled:false
},
events : {
afterSetExtremes : this.afterSetExtremes
}
},
yAxis: {
title: {
text: this.streamChart.title
},
labels: {
enabled:true
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false
},
plotOptions: {
series: {
animation: false
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
yAxis: {
title: {
enabled: false
}
}
}
}]
},
series: [
{
name: this.streamChart.title,
pointStart: 1546300800000,
pointInterval: 5 * 60 * 1000
}
]
},
when the Highstock loads, I use callback, to get it and set it as a local vue var and also push it in an array in the vuex store, so I can have all charts available.
chartcallback(hc){
this.chart=hc;
this.currentId = this.streamChart.id;
this.chartData = this.chartData.concat(this.getStreamPlots[this.currentId].data);
this.addStreamCharts(hc); //push it to an array in vuex store
this.chart.series[0].setData(this.chartData, true, true, true);
},
and then I use the updateCoordinates to get all the values from all the charts I saved in vuex store, using the searchPoint. Then, feed the values to the tooltip of the chart I am currently hovering
updateCoordinates(e){
if (this.getStreamPlots.done && this.chart != null) {
let hce = this.chart.pointer.normalize(e);
let points=[];
this.getStreamCharts.forEach(chart => {
let point = chart.series[0].searchPoint(hce, true);
points.push(point);
});
this.chart.tooltip.refresh(points);
}
}
Problems :
1- This works but it shows all the values to the first chart I hovered. For example, I hover to the first chart, I get all the values into the tooltip as I should. But then I hover to the third chart and the values are still showed in the first chart tooltip. No tooltip in the third chart.
2- The values are in different tooltips. I would like for all the values be in one tooltip. (check the image)
Thank you

Highcharts-react not rendering on initial page load

I have a simple React component which is supposed to render two Highcharts using the highcharts-react library. The data for the charts comes from a parent component's state and is passed to this component as a prop. When the page loads, the pie chart is empty (eg there's just an empty circle with no series). If I inspect the HighchartsReact element using the React element inspector, I can see that the correct data is in the options prop. Also, if I manually alter any of the data in the inspector, the chart suddenly shows up. My guess is that it has something to do with the chart not updating properly but I can't exactly pin down what I am doing wrong.
const sharedPlotOptions = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: null,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Countries',
colorByPoint: true,
data: []
}]
}
export function CountryPopulationPlot(props) {
let adultData = props.countries.map(country => ({
name: country.name,
y: country.population //TODO: use adult only data
}))
let allData = props.countries.map(country => ({
name: country.name,
y: country.population
}))
let adultPlotOptions = sharedPlotOptions
adultPlotOptions.series[0].data = adultData
let allPlotOptions = sharedPlotOptions
allPlotOptions.series[0].data = allData
return(
<div>
<HighchartsReact
highcharts={Highcharts}
options={adultPlotOptions}
oneToOne={true}
/>
<HighchartsReact
highcharts={Highcharts}
options={allPlotOptions}
/>
</div>
);
}
EDIT: oneToOne prop was an attempt at fixing the bug, it doesn't seem to have any effect.

In Highcharts for Pie charts to render, the adultData and allData should be in the format as below:
[
{
name: "USA",
y: 1000
},
{
name: "Italy",
y: 500
}
]
(or)
[
{
"name": "USA",
"y": 1000
},
{
"name": "Italy",
"y": 500
}
]
Please double check this in your input data. I have written a blog post and a working application on GitHub with a simple Highcharts Pie chart example. Please check: http://softwaredevelopercentral.blogspot.com/2020/03/react-highcharts-and-spring-boot.html

I'm having the same issue and found a rough workaround. Like you said this happens on the initial component render. Therefore triggering a re-render by updating a state solves the problem.
const [shouldRender, doRender] = useState(true)
useEffect(() => {
if (shouldRender) { // this stops the cycle after the first re-render
doRender(!shouldRender)
}
Would like to add in case someone has a better solution, I'm rendering multiple graphs with the same props and only pie charts are an issue.

data and label json array not showing up on chart

I am using highcharts to display a bar chart of my data which i am getting from a json file.
I tried following highcharts example for a bar chart for some reason mine is not displaying anything on the chart nor giving me an error.
This is how i am loading my json data for labels and data values - i am returning the data that i want but the issue with display:
chartLabel: any[] = [];
chartValue: any[] = [];
this.serviceFile.getData().subscribe(
data => {
this.result = data;
this.result.forEach(graph =>{
this.chartLabel.push(graph.labelName);
this.chartValue.push(graph.value);
})
});
HTML:
<chart [options]="options"></chart>
chart options:
this.options = {
chart: {
type: 'bar',
margin: 75
},
xAxis: {
categories: this.chartLabel,
title: {
text: null
}
},
yAxis: {
min: 0,
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
data: this.chartValue
}]
};
I am not sure if the way i created the arrays of my json data are appropriate for the highcharts chart.
I noticed in my console.log the way the data prints out is different which i believe is the cause of the problem and maybe some light on this matter will help:
printout for this.chartValue:
(3)[12,34,54]
what this should look like is:
12,34,54

Can the colors on charts in ExtJs/ YUI Charts be changed dynamically?

I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?

Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});

Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.

Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.