Related
I am using react-chart-2 Line to show graph;
What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']
and i have these value:
const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]
in my options scale i have
scales: {
x: {
grid: {
drawOnChartArea: false,
},
position: 'bottom' as const;
labels: colors
},
x1: {
grid: {
drawOnChartArea: true,
},
position: 'top' as const,
labels: sharpe,
},
y: {
beginAtZero: true,
ticks: {
maxTicksLimit: 5,
stepSize: 5,
},
},
},
and in my data i have
{
labels: colors,
datasets: [
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x'
},
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
}
the expected result is that i have 2 x axis , in the bottom is the colors and in the top the sharpe; one y axis; and the two line will be drawed but the colors depends on colorsData value and the sharpe depends on sharpeData value.
But instead the colors line is drawed as expected but the sharpe line follow the colors label instead of sharpe label
What you are trying to achieve is not possible. The values of the top and bottom axis should be the same. Unless you stack two charts on top of one another with css.
You can only have the same labels for both axis x and x1 or y and y1 respectively.
This is the official docs on Charts.js for y axis.
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
Here is some code to give you an idea of what I have come to with top and bottom x axis:
Options:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction:{
mode: "index",
intersect: false,
},
stacked: false,
scales: {
x:{
type: "linear",
display: true,
position: "bottom",
},
x1:{
type: "linear",
display: true,
position: "top",
grid: {
drawOnChartArea: false,
},
},
},
},
};
Data:
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
datasets: [
{
label: "Colors",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x',
},
{
label: "Shape",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
};
Hope this helps!
I have a table that I created in PDFMAKE with react that I would like to create spacing between that table and the text below. The text that comes after the table is placed in it and I can't make them not stick together. can anybody help me? here is the code:
const date = serviceItems.map((serviceItems) => {
{
return [
{ text: serviceItems.publicId, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeName, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemName, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemUnitQuantity, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemUnitMeasurement, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.status, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.unitValue, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.quantity, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: service.total, fontSize: 9, margin: [0, 2, 0, 2] }
]
}
})
const details = [{
table: {
headerRows: 1,
widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
body: [
[
{ text: 'A', style: 'tableExample', fontSize: 9 },
{ text: 'B', style: 'tableExample', fontSize: 9 },
{ text: 'C', style: 'tableExample', fontSize: 9 },
{ text: 'D', style: 'tableExample', fontSize: 9 },
{ text: 'E', style: 'tableExample', fontSize: 9 },
{ text: 'F', style: 'tableExample', fontSize: 9 },
{ text: 'G', style: 'tableExample', fontSize: 9 },
{ text: 'H', style: 'tableExample', fontSize: 9 },
{ text: 'I', style: 'tableExample', fontSize: 9 },
],
...date
]
},
layout: 'lightHorizontalLines\n\n\n\n\n',
}];
When i am trying to implement a react-native-chart-kit graph, I get this error message.
However, when i dismiss it, all the code works. I am using use states to have it render once data from database is loaded, which might me the issue. However, im just a bit confused because I have done a similar thing with another graph which worked with no issues.
const [lineData, setLineData] = React.useState({
datasets: [{
data: [],}]
})
var moodLine = []
if (value["entry"]["mood"] == 1) {
mood1 += 1
moodLine.push(1)
}
setLineData({
datasets: [{
data: moodLine,
}]
})
<LineChart
data={lineData}
width={360}
height={220}
bezier
withInnerLines={false}
fromZero={true}
// chartBreakPoints={[0, 1, 2, 3, 4, 5]}
// hidePointsAtIndex={[0, 1, 2, 3, 4, 5]}
// withHorizontalLabels={false}
chartConfig={{
backgroundColor: colours.white,
backgroundGradientFrom: colours.white,
backgroundGradientTo: colours.white,
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 1) => colours.grey,
labelColor: (opacity = 1) => colours.black,
// style: {
// borderRadius: 16,
// },
// propsForDots: {
// r: "0",
// strokeWidth: "2",
// stroke: "#ffa726"
// }
}}
style={{
borderRadius: 16,
// marginBottom: 50
}}
/>
I have try to show inactive setting in my chart. But it's not showing in my project { it's worked on another live editor }
Chart Library: Highcharts
Chart type: scatter
Chart Version:
"highcharts": "^6.1.1",
"highcharts-more": "^0.1.7","highcharts-react-official": "^3.1.0",
``const config = {
chart: {
zoomType: 'x',
type: 'scatter',
height: 400,
spacingLeft: 0,
spacingRight: 0,
spacingTop: 0,
spacingBottom: 0,
margin: [30, 50, 80, 180],
width: null,
style: {
fontFamily: 'Fira Sans'
},
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 3600 * 4000,
minTickInterval: 3600 * 100,
minRange: 1000 * 60 * 60,
dateTimeLabelFormats: {
minute: '%I:%M',
hour: '%I %P',
},
offset: 0,
},
yAxis: [
{
title: {
text: 'Part A',
align: "high",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: -10,
x: -15,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
labels: {
style: {
fontWeight: 300,
fontSize: '14px',
lineHeight: 16,
color: "#333333",
letterSpacing: 0,
},
y: 3,
align:'right',
},
categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
},
{
title: {
text: 'Part B',
align: "middle",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: 30,
x: 25,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
},
],
plotOptions: {
column: {
stacking: 'normal',
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
grouping: true,
}
},
},
series: [
{
"name": "Poor",
"data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
color: '#FF8A45',
marker: {
symbol: 'square'
},
},
{
"name": "Fair",
"data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
color: '#FFC100',
marker: {
symbol: 'square'
},
},
{
"name": "Moderate",
"data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
color: '#B7DCFD',
marker: {
symbol: 'square'
},
},
{
"name": "Good",
"data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
color: '#00C96A',
marker: {
symbol: 'square'
},
},
],
credits: {
enabled: false
},
};``
Here is my full config of hoghchart
You are using the 6.1.1 version but inactive option is available from 7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 .
I would recommend to always using the latest highcharts version.
So, all you have to do is set "highcharts": "latest" in your project.
If for some reason you need to use an older version, use mouseOver and mouseOut events to change the series color on hover.
plotOptions: {
series: {
events: {
mouseOver: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 0.5)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 0.5)'
})
}
})
},
mouseOut: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 1)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 1)'
})
}
})
}
}
}
},
Example demo:
https://jsfiddle.net/BlackLabel/zgjsof7L/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
Is it possible to Draw this type of gauges in the left and right of the circle using Highcharts?
Basically left side gauge is representing the shorts' %age at left, the right side gauge is representing the shorts' %age at right, and the center is one simple round circle with the %age of center shots.
Series variable pie it's looks fit better for this case.
Tooltip we built setting useHTML:true, circle at the center we rendered by SVG renderer.
Highcharts.chart('container', {
chart: {
events: {
render() {
const chart = this;
if (!chart.customCenterCircle) {
chart.customCenterCircle = chart.renderer.circle(
chart.plotLeft + chart.plotSizeX / 2,
chart.plotTop + chart.plotSizeY / 2,
0
).add().toFront();
}
if (!chart.customCenterText) {
chart.customCenterText = chart.renderer.text('50%', 0, 0).css({
fontSize: '24px',
color: '#d4d4d4'
}).add().toFront();
}
chart.customCenterCircle.animate({
x: chart.plotLeft + chart.plotSizeX / 2,
y: chart.plotTop + chart.plotSizeY / 2,
r: chart.series[0].center[3] / 2,
fill: 'rgba(31, 112, 31, 0.5)',
stroke: 'rgba(154, 214, 154, 1)',
'stroke-width': 4
});
chart.customCenterText.attr({
x: chart.plotLeft + chart.plotSizeX / 2 -
chart.customCenterText.getBBox().width / 2,
y: chart.plotTop + chart.plotSizeY / 2 -
chart.customCenterText.getBBox().y -
chart.customCenterText.getBBox().height / 2
});
}
}
},
tooltip: {
backgroundColor: '#ffffff',
borderWidth: 0,
useHTML: true,
formatter: function() {
return `<p><h1 style="color:${this.color};">${this.y}</h1></br>${this.key}</p>`
}
},
series: [{
type: 'variablepie',
minPointSize: 0,
innerSize: '30%',
startAngle: 30,
dataLabels: {
enabled: false
},
borderWidth: 3,
zMin: 0,
data: [{
y: 80,
z: 100,
name: 'other',
color: 'black'
}, {
y: 30,
z: 100,
name: 'missed right',
color: 'red'
}, {
y: 50,
z: 0
}, {
y: 25,
z: 80,
name: 'missed right',
color: 'red'
}, {
y: 75,
z: 80,
name: 'other',
color: 'black'
}, {
y: 60,
z: 0,
name: 'other',
}]
}]
});
Live demo:
https://jsfiddle.net/BlackLabel/sc9vwzjt/2/
API References:
https://www.highcharts.com/docs/chart-and-series-types/variable-radius-pie-chart
https://api.highcharts.com/highcharts/series.variablepie
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer