Related
curious if there is a way to get the proper index on stacked data (such as a Waterfall diagram) from AnyChart. Using the below on a waterfall gets you the same index for anything click on in a specific stack, when really there should be two index numbers (the column index and the element index within that column).
// add a listener
chart.listen("pointClick", function(e){
var index = e.iterator.getIndex();
});
Thanks
You can get the element index through e.target.getIndex().
anychart.onDocumentReady(() => {
let data = anychart.data.set([
["Start", 23, 30, 21],
["Jan", 22, 22, 54],
["Feb", -46, 45, -32],
["Mar", -91, -30, -28],
["Apr", 37, -27, 36],
["May", -24, 62, -48],
["Jun", 55, 40, -29],
["Jul", 31, 33, 41],
["Aug", -25, -46, 36],
["Sep", 42, 23, 22],
["Oct", 67, -44, -40],
["Nov", -24, -31, 37],
["Dec", 51, 28, 25],
["End", { isTotal: true }, { isTotal: true }, { isTotal: true }],
]);
let seriesData_1 = data.mapAs({ x: 0, value: 1 }),
seriesData_2 = data.mapAs({ x: 0, value: 2 }),
seriesData_3 = data.mapAs({ x: 0, value: 3 });
let chart = anychart.waterfall();
let series1 = chart.waterfall(seriesData_1),
series2 = chart.waterfall(seriesData_2),
series3 = chart.waterfall(seriesData_3);
chart.labels().position("center");
chart.labels().fontColor("white");
chart.listen("pointClick", e => {
let columnIndex = e.iterator.getIndex(),
elementIndex = e.target.getIndex(); // <--- HERE
console.log(`Column index: ${columnIndex}`);
console.log(`Element index: ${elementIndex}`);
});
chart.container("container");
chart.draw();
});
#container {
width: 100%;
height: 350px;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-waterfall.min.js"></script>
<div id="container"></div>
The example above is a modified version of what you can find there: Waterfall Chart | Basic Charts | AnyChart Documentation
I am having this Apex chart in my react app ,
What I want to do is add more space between the x-axis label which is the month labels and the series name below it (Session Duration, Page Views, Total Visits). How can I achieve that
This is my code below
............................................................................................................................
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: "Session Duration",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
{
name: "Page Views",
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
},
{
name: 'Total Visits',
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
}
],
options: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [5, 7, 5],
curve: 'straight',
dashArray: [0, 8, 5]
},
title: {
text: 'Page Statistics',
align: 'left'
},
legend: {
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
}
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
tooltip: {
y: [
{
title: {
formatter: function (val) {
return val + " (mins)"
}
}
},
{
title: {
formatter: function (val) {
return val + " per session"
}
}
},
{
title: {
formatter: function (val) {
return val;
}
}
}
]
},
grid: {
borderColor: '#f1f1f1',
}
},
};
}
render() {
return (
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height={350} />
</div>
);
}
}
Based on some fiddling around with the Appchart demo, found 2 options that seem to provide result here.
Both use the legend key inside options, which you have in your code
You can add specific height to the legend container
legend: {
height: 100
}
This will allow you to add margin to each legend.
legend: {
itemMargin: {
horizontal: 20
}
}
Hopefully someone with more experience with AppChart can provide a better solution but till then you can look into these.
I have a chart built with react-chartjs-2. The chart displays when I enter the values for data directly in the datasets like this.
datasets: [
{
label: "Active Countries",
backgroundColor: gradientFill,
borderColor: "#2CA8FF",
pointBorderColor: "#FFF",
pointBackgroundColor: "#2CA8FF",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155]
}
]
However, I want to replace the value of the data in the datasets with a monthly transaction derived from transactions recorded in my database. The code for my total transaction for each month Jan to Dec ( One for each month) is like this.
const januaryTransactions = transactions.filter(i => {
const date = new Date(i.date);
return date.getMonth() === January && date.getYear() === relevantYear;
}).reduce((prev, curr) => prev + parseFloat(curr.amount), 0)
My question is how do I replace for example the value at in index 0 [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155] which is 80 with januaryTransactions .
Any Pointers are mostly appreciated!!
I am setting my series like below.
import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "../../../../resources/js/motion";
import HC_more from "highcharts/highcharts-more"; //module
import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';
require("highcharts/modules/map")(Highcharts);
HC_more(Highcharts); //init module
class BubbleContainer extends Component {
style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};
state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: []
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data: []
}]
}
}
// Render app with demo chart
componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: [{
sequence: [...renderObj.series[0].sequence]
}]
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
If I put data directly then highchart will load.
I am getting data like below.
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
I have given my entire class above.
While doing setState if I put series data directly highchart will load. But if I use dynamic data what I got from response then highchart is not loading wrt to data.
I am rendering highchart like below.
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={"chart"}
/>
My question is if I change the data dynamically using setState chart is not rendering. What is the cause here.
But if I debug in render all the data are available after setState. But highchart is not rendering wrt to series change.
I have a service call on componentDidMount. Up on getting the data, I am trying to set my state which holds highchart information.
Code is below.
import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import plugin from "../../../../resources/js/motion";
import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';
require("highcharts/modules/map")(Highcharts);
class LineContainer extends Component {
style = {
fontFamily: "'univers', Arial, sans-serif",
fontSize: 14,
color: "#333333"
};
state = {
options: {
chart: {
height: 380,
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
resetZoomButton: {
theme: {
states: {
hover: {
fill: '#D98C14',
stroke: '#BF7400',
}
}
}
}
},
credits: {
enabled: false
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data: []
}]
}
}
// Render app with demo chart
componentDidMount() {
Services.getLoadAndUnbalanceData().then(res => {
const renderObj = ProcessData(res);
this.setState({
options: {
...this.state.options,
motion: {
...this.state.options.motion,
labels: renderObj.timestamp
},
series: [{
...this.state.options.series[0],
data: renderObj.series
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
/>
);
}
}
Here I am able to get the render on set state. But data is not updating on chart. Am I setting it wrongly or what. Please suggest. If I debug I can able to see the changed data on render method. But highchart is not updating
Data I am getting like below
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
If I use normal data just like below it will work
[[2, 2], [10, 10]]
But it wont work sequence of data which motion video needs