Related
Is there anywhere to make linear gradient on full date/year
https://jsfiddle.net/0712nw3g/64/
for example if i move/scroll the graph in 3 month zoom, color gradient should be the same as 1year/all
series: [{
type: 'line',
name: 'Volume',
id: 'stock',
data: volume,
yAxis: 0,
dataGrouping: {
units: groupingUnits
},
lineWidth: 10,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, '#26A69A'],
[1, '#CE1510']
]
},
}
]
You can set the options xAxis.events.afterSetExtremes to modify the color gradient in the graph but the color in the navigator also changes.
https://jsfiddle.net/BlackLabel/j3ca7oyh/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[1 - currentRange / dataRange, 'blue'],
[1, 'yellow']
]
},
})
}
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Another way will be adding a series inside the navigator and trying to calculate gradient color.
https://jsfiddle.net/BlackLabel/qLp61uft/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'red'],
[1, 'yellow']
]
},
})
}
}
},
navigator: {
series: {
name: 'AAPL',
data: data,
fillColor: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
I am trying to update the data series on the update button by providing new series. As the result, new series will be a plotting along with the old series.
And After plotting the new series, the values on are X-axis is clear up. Here I Am attaching the code snippet please have look.
Initial State config:
this.state = {
chartOptions: {
credits: {
enabled: false,
},
chart: {
type: 'spline',
},
title: {
text: 'Chart',
},
plotOptions: {
series: {
shadow: false,
marker: {
enabled: false,
},
},
},
xAxis: {
gridLineWidth: 1,
type: 'datetime',
lineColor: '#999',
lineWidth: 1,
title: {
text: 'Time',
style: {
color: '#000',
},
},
},
yAxis: [
{
title: {
text: 'Value',
},
gridLineWidth: 1,
lineWidth: 1,
opposite: true,
plotLines: [
{
color: '#55c2ea',
width: 2,
value: props.data[0][1], // Need to set this probably as a var.
label: {
text: props.data[0][1],
textAlign: 'left',
verticalAlign: 'middle',
style: {
color: '#55c2ea',
fontSize: 16,
borderWidth: 1,
backgroundColor: '#55c2ea',
borderColor: '#55c2ea',
},
x: 330,
},
},
],
accessibility: {
enabled: true,
},
opposite: true,
},
],
time: {
useUTC: false
},
series: [
{
showInLegend: false,
color: '#FF0000',
data: props.data.slice(0, props.tradingInterval),
},
],
}
};
Update Function:
updateSeries = () => {
this.setState({ chartOptions: {
series: [
{
showInLegend: false,
color: '#FF0000',
data: this.props.data.slice(0, 15),}
]
} })
}
Graph Render code:
render() {
return (
<View style={styles.container}>
<HighchartsReactNative
styles={styles.chart}
options={this.state.chartOptions}
/>
<Button
title="Refresh"
onPress={this.updateSeries.bind(this)}/>
</View>
);
}
After updating graph looks like
Class Component Code: https://gist.github.com/cupatil/da00b0ab0866e3a4f9306f0425e92582
Also tried this code using a functional component.
Using Functional Component Code: https://gist.github.com/cupatil/2fc1862f64f3a511158ced3c6b64d215
But the same thing happens series changed but not able to plot the graph property as per the image. Also, X-Axis data not calculated properly.
Sample Series data that I am using:
[ { x: 1607883000000, y: 1.6093 },{ x: 1607882940000, y: 1.6094 },{ x: 1607882880000, y: 1.6093 },{ x: 1607882820000, y: 1.6094 },{ x: 1607882760000, y: 1.6094 },{ x: 1607882700000, y: 1.6094 },{ x: 1607882640000, y: 1.6095 },{ x: 1607882580000, y: 1.6094 },{ x: 1607882520000, y: 1.6095 },{ x: 1607882460000, y: 1.6093 },{ x: 1607882400000, y: 1.6095 },{ x: 1607882340000, y: 1.6095 },{ x: 1607882280000, y: 1.6088 },{ x: 1607882220000, y: 1.6096 },{ x: 1607882160000, y: 1.6095 },{ x: 1607882100000, y: 1.6096 },{ x: 1607882040000, y: 1.6096 },{ x: 1607881980000, y: 1.6096 },{ x: 1607881920000, y: 1.6097 },{ x: 1607881860000, y: 1.6097 },{ x: 1607881800000, y: 1.6099 },{ x: 1607881740000, y: 1.6101 },{ x: 1607881680000, y: 1.61 },{ x: 1607881620000, y: 1.61 },{ x: 1607881560000, y: 1.6099 },{ x: 1607881500000, y: 1.6099 },{ x: 1607881440000, y: 1.6099 },{ x: 1607881380000, y: 1.6098 },{ x: 1607881320000, y: 1.6099 },{ x: 1607881260000, y: 1.6098 },{ x: 1607881200000, y: 1.6098 },{ x: 1607881140000, y: 1.6098 },{ x: 1607881080000, y: 1.6099 },{ x: 1607881020000, y: 1.6098 },{ x: 1607880960000, y: 1.6099 },{ x: 1607880900000, y: 1.6098 },{ x: 1607880840000, y: 1.6098 },{ x: 1607880780000, y: 1.6099 },{ x: 1607880720000, y: 1.6098 },{ x: 1607880660000, y: 1.6096 },{ x: 1607880600000, y: 1.6097 },{ x: 1607880540000, y: 1.61 },{ x: 1607880480000, y: 1.6099 },{ x: 1607880420000, y: 1.6101 },{ x: 1607880360000, y: 1.61 },{ x: 1607880300000, y: 1.6101 },{ x: 1607880240000, y: 1.61 },{ x: 1607880180000, y: 1.6101 },{ x: 1607880120000, y: 1.6101 },{ x: 1607880060000, y: 1.61 },{ x: 1607880000000, y: 1.6099 },{ x: 1607879940000, y: 1.6099 },{ x: 1607879880000, y: 1.6098 },{ x: 1607879820000, y: 1.61 },{ x: 1607879760000, y: 1.6097 },{ x: 1607879700000, y: 1.6098 },{ x: 1607879640000, y: 1.6096 },{ x: 1607879580000, y: 1.6096 },{ x: 1607879520000, y: 1.6097 },{ x: 1607879460000, y: 1.6096 },{ x: 1607879400000, y: 1.6095 } ]
All right, I was doing it the other way around, and that's why I was not able to reproduce the described error. Well, so now I see the problem, but as I thought, it's caused by passing not sorted (x ascending order) data, what you can notice after opening the browsers console, and see the Highcharts #15 error.
In order to make it work correctly, you need to always make sure that you're passing the data, which is sorted in ascending order (point x values are increasing along with the array element index).
So, to sum up, sort the array:
[
// data here
].sort((a, b) => a.x - b.x)
then change the the way you prepare (slice) the initial data:
data.slice(data.length - 1 - 15, data.length - 1)
and now it should work as expected.
Live examples:
Without React: https://jsfiddle.net/BlackLabel/37cdryg9/
With React: https://codesandbox.io/s/highcharts-react-demo-forked-q3whu
I have a stacked bar chart, whose x axis labels would be date, the labels are overlapping how do I arrange them in such a way that it does not overlap on the next label of x axis.
I did not get how to arrange them changing the angle of the label, can anyone help me out solving the problem.
current graph image
victory-native
react-native-svg
const myDataset = [
[
{ x: "20/10/2020", y: 18653 },
{ x: "21/10/2020", y: 20000 },
{ x: "23/10/2020", y: 97345 },
{ x: "24/10/2020", y: 25687 },
{ x: "25/10/2020", y: 89761 }
],
[
{ x: "20/10/2020", y: 4566 },
{ x: "21/10/2020", y: 3888 },
{ x: "23/10/2020", y: 4975 },
{ x: "24/10/2020", y: 5965 },
{ x: "25/10/2020", y: 5768 }
],
];
class App extends React.Component {
// This is an example of a function you might use to transform your data to make 100% data
transformData(dataset) {
const totals = dataset[0].map((data, i) => {
return dataset.reduce((memo, curr) => {
return memo + curr[i].y;
}, 0);
});
return dataset.map((data) => {
return data.map((datum, i) => {
return { x: datum.x, y: (datum.y / totals[i]) * 100 };
});
});
}
render() {
const dataset = this.transformData(myDataset);
return (
<div>
<VictoryChart height={400} width={400}
domain={{ x: [0,5], y: [0, 100000] }}
domainPadding={{ x: 30, y: 20 }}
>
<VictoryLegend x={280} y={0}
gutter={50}
style={{title: {fontSize: 20 } }}
data={[
{ name: "Tax", symbol: { fill: "blue" } },
{ name: "Amount", symbol: { fill: "black" } }
]}
/>
<VictoryStack
colorScale={["black", "blue"]}
>
{myDataset.map((data, i) => {
return <VictoryBar barWidth={20}
data={data} key={i} labelComponent={<VictoryLabel y={250} verticalAnchor={"start"}/>}/>;
})}
</VictoryStack>
<VictoryAxis dependentAxis />
<VictoryAxis
padding={{ left: 80, right: 60 }}
axisLabelComponent={<VictoryLabel angle={20}/>}
tickFormat={["20/oct/20","21/oct/20", "23/oct/20","24/oct/20","25/10/20"]}/>
</VictoryChart>
</div>
);
}
}
ReactDOM.render(<App/>, mountNode);
The above code can be copy pasted in below link and can edit
https://formidable.com/open-source/victory/gallery/100-column-chart/
Is there any way that I could arrange them like below.
I've gotten it to work by passing a VictoryLabel with a -45 degree angle to the tickLabelComponent prop on your independent axis:
<VictoryAxis tickLabelComponent={<VictoryLabel angle={-45} y={350} />} />
So instead of passing the VictoryLabel to the axisLabelComponent prop on the VictoryAxis, pass it to the tickLabelComponent prop.
https://formidable.com/open-source/victory/docs/victory-axis#ticklabelcomponent
You might also need to add some padding to your VictoryChart component if the labels are cut off:
padding={{top: 100, bottom: 90, left: 70, right: 80}}
https://formidable.com/open-source/victory/docs/victory-axis#padding
This is the solution i used. I had to display time on the x-axis.
In your case, you can take off the tick formatting from the VictoryAxis and let VictoryChart do the date formatting by adding property scale={{x: 'time'}} to VictoryChart
And then add fixLabelOverlap to VictoryAxis which fixes the overlap issue.
hey im trying to make a chart using victory from the data online json data in react native. the code for the component is like below
export default class Dashboard extends Component {
static navigationOption = {
title: 'DashboardScreen'
}
state = {
getValue: '',
dataSource:[],
isLoading: true
}
componentDidMount() {
const url = 'myurl';
fetch(url, {
method: 'GET',
headers: new Headers({
'Content-Type' : 'application/json',
})
})
.then((response)=> response.json() )
.then((responseJson) => {
console.log(responseJson.Views)
this.setState({
dataSource: responseJson,
isLoading: false
})
})
.catch((Error) => {
console.log(Error)
})
}
render() {
return(
<View style = {styles.container}>
<VictoryChart minDomain={{ y: 0, x:0 }} width={350} theme={VictoryTheme.material}>
<VictoryBar
style={{
data: { stroke: "#c43a31" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: 1 },
{ x: 2, y: dataSource[0].views},
{ x: 3, y: dataSource[1].views},
{ x: 4, y: dataSource[2].views},
{ x: 5, y: dataSource[3].views}
]}>
</VictoryBar>
</VictoryChart>
</View>
)
}
}
i thought the fetch already make the json information an array in dataSource Variable and can be used as a data in victory but i always got error like referenceError: Can't find variable 'dataSource'
So, it would be very nice if anyone helps me out with this code and suggest how make the json data into chart
change:
data={[
{ x: 1, y: 1 },
{ x: 2, y: dataSource[0].views},
{ x: 3, y: dataSource[1].views},
{ x: 4, y: dataSource[2].views},
{ x: 5, y: dataSource[3].views}
]}>
to
data={[
{ x: 1, y: 1 },
{ x: 2, y: this.state.dataSource[0].views},
{ x: 3, y: this.state.dataSource[1].views},
{ x: 4, y: this.state.dataSource[2].views},
{ x: 5, y: this.state.dataSource[3].views}
]}>
Hope this helps!
I am now using Dojo to show a line chart. but I don't know how to change the series line color, would anyone help? thx.
var chart1 = new dc.Chart("test1");
chart1.addPlot("default", { type: "Default", lines: true, markers: true, tension: 1 });
chart1.addAxis("x", { majorTick: { stroke: "black", length: 5 }, minorTick: { stroke: "black", length: 1} });
chart1.addAxis("y", { vertical: true, majorTick: { stroke: "black", length: 5 }, minorTick: { stroke: "black", length: 1} });
chart1.addSeries("Series A", [{ x: 0.5, y: 5 }, { x: 1.5, y: 1.5 }, { x: 2, y: 9 }, { x: 5, y: 0.3}]);
chart1.addSeries("Series B", [{ x: 0.3, y: 8 }, { x: 4, y: 6, tooltip: "Custom tooltip" }, { x: 5.5, y: 2}]);
chart1.addSeries("Series C", [{ x: 0.8, y: 6 }, { x: 8, y: 1, tooltip: "Custom tooltip" }, { x: 7, y: 2}]);
chart1.addSeries("Series D", [{ x: 0.1,y: 5}, { x: 2, y: 3, tooltip: "Custom tooltip" }, { x: 4, y: 5}]);
var anim1a = new dc.action2d.Magnify(chart1, "default");
var anim1b = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
for Series A, Series B,Series C,Series D,I want to use my-defined color to show them, anyone can help?
You can probably also provide the color in your series for it to be used by the plot. Something like the following:
chart1.addSeries("Series A",
[{ x: 0.5, y: 5 }, { x: 1.5, y: 1.5 }, { x: 2, y: 9 }, { x: 5, y: 0.3}],
{ stroke: "green" });
You can change the colors by using the setTheme() function while defining your chart.
Must look like :
require(["dojox/charting/Chart", "dojox/charting/themes/Shrooms", "dojox/charting/plot2d/Areas", ...],
function(Chart, Shrooms, Areas, ...){
new Chart(node)
addPlot("default", { type: Areas, tension: "X" })
setTheme(Shrooms)
addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
render();
});
In this example the Theme "Shrooms" will be loaded.
Here you can see, what themes are available for Charts:
http://demos.dojotoolkit.org/demos/chartTypes/demo.html
and in the dojo API you can find them under dojox/charting/themes.
Here's a good tutorial how you can define themes by yourself:
http://dojotoolkit.org/documentation/tutorials/1.9/charting/
Regards, Miriam