Related
Is below chart possible in highchart
Column with high, low and target
Color gradient with denser on target and lighter away
Data table for low, high and target
Managed to get some bits, but not full functionality
https://jsfiddle.net/z9u5hgod/2/
TIA
[
{
type: 'bullet',
dataLabels: [
{ format: '{point.y}' } ,
{format: '{point.target}',
inside: true},
{
inside: true,
verticalAlign: 'bottom',
align: 'center',
format: '{point.low}'
}
],
data: [
{
low: 250,
y: 1650,
target: 750,
color: {
linearGradient: [0, '70%', 0, '50%'],
stops: [
[0, 'green'],
[1, 'orange']
]
}
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}]
Response from higcharts developer
https://jsfiddle.net/BlackLabel/xbvp8he7/
const chart = Highcharts.chart('container', {
chart: {
type: 'bullet',
events: {
load() {
const firstSeries = this.series[0];
firstSeries.data.forEach(point => {
const {
low,
y,
target
} = point,
gradientPoint = (y - target) / (y - low);
point.update({
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'blue'],
[gradientPoint, 'purple'],
[1, 'blue']
],
}
})
})
}
}
},
plotOptions: {
series: {
pointPadding: 0.2,
groupPadding: 0.1,
targetOptions: {
borderWidth: 0,
height: 3,
color: 'red',
width: '100%'
}
}
},
xAxis: {
categories: ['Alex ar', 'Cairo ar']
},
series: [
{
type: 'bullet',
dataLabels: [{
enabled: true,
}, {
enabled: true,
verticalAlign: 'top',
align: 'center',
color: 'white',
useHTML: true,
formatter() {
const point = this.point,
target = point.targetGraphic,
targetY = target.getBBox().y - point.shapeArgs.y - 25;
return `
<div class="datalabelInside" style="position: relative; top: ${targetY}px">${point.target}</div>
`;
}
}, {
verticalAlign: 'bottom',
inside: true,
y: 20,
format: '{point.low}',
enabled: true
}, ],
data: [{
low: 250,
y: 1650,
target: 750
},
{
low: 100,
y: 2000,
target: 1500
}
]
},
{
data: [{
low: 600,
y: 2350,
target: 2100
}, {
low: 450,
y: 1700,
target: 1250
}]
}
],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
how do i set hoverinfo font , right now I have set font for title but wanna do same for hoverinfo too, I tried official documentation but couldn't find it
<PieChart data={[{
values: [60, 20, 10, 5, 5], labels: ['Healthy', 'Mild', 'Moderate', 'Severe', 'Critical'], hole: .6, type: 'pie', marker: {
colors: ['#68B34D', '#FFDF83', '#FE9551', '#FE0801', '#B90000']
}
}]}
layout={{
title: { text: '<b>Health Status</b>', x: '0.1', size: '14', font: { family: 'Montserrat, sans-serif' } }, annotations: [
{
font: {
size: 13,
color: '#323D4B',
family: 'Montserrat, sans-serif'
},
text: `<b>${pieData.values.reduce((a, b) => a + b, 0)}<br>Machines</b>`,
showarrow: false,
}
], showlegend: true,
legend: { orientation: 'h', x: 0.5, y: -.7, xanchor: 'center', yanchor: 'bottom', font: { family: 'Montserrat, sans- serif' } },
height: 320,
width: 248,
margin: { l: 0, r: 0, t: 50, b: 20 },
}} />
import createPlotlyComponent from "react-plotly.js/factory";
export const Plot = createPlotlyComponent(Plotly);
export function PieChart(props: PieChartProps) {
const { data, layout } = props;
return <Plot data={data} layout={layout} />;
}
I'm using echarts-for-react to create a gauge. I'm trying to disable the hover effect on the pointer.
The current behaviour is that I have a circle with a small pointer, and when hovering, the pointer covers the text. I've tried setting emphasis: null but it didn't change anything.
Here's the pictures demonstrating this issue:
Normal Behaviour
When hovering
Here's my code:
const series = {
type: 'gauge',
radius: '100%',
startAngle: '-20',
endAngle: '200',
clockWise: false,
data: [ltv],
max: 150,
axisLine: {
show: true,
lineStyle: {
width: '12',
color: [[0.2, '#e2da34'], [0.4, '#c2e234'], [0.6, '#7dea52'], [0.8, '#c2e234'], [1, '#e2da34']],
shadowColor: '#f5f5f5',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '100%',
width: '4'
},
itemStyle: {
color: '#d1d1d1',
borderWidth: 5,
borderColor: '#d1d1d1'
},
detail: {
show: true,
formatter: e => [`{val|${e.toFixed(1)}%}`, '{text|Good!}'].join('\n'),
rich: {
val: {
color: '#2f353a',
fontWeight: 'bold',
fontFamily: 'SegoePro-Bold',
fontSize: '24'
},
text: {
color: '#9c9c9c',
fontFamily: 'SegoePro-Regular',
fontSize: '12'
}
},
offsetCenter: [0, 0],
padding: [40, 10, 0, 10],
width: 85,
height: 65,
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 50,
borderShadow: '#000000'
}
};
const config = {
title: {
show: false
},
legend: {
show: false
},
tooltip: {
show: false
},
series
};
Question: How can I "reformat" the x-axis to be in ascending date, when the data contains a variable amount of dates within it?
I have some data that contains variable amounts of "date" associated with it. For example, Line One contains:
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }
Whereas Line Two contains:
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }
Code box: https://codesandbox.io/s/dreamy-almeida-x7rnd?fontsize=14&hidenavigation=1&theme=dark
The data is "uneven" on the x-axis, hence why it looks weird. I realise that if I were to put in "dummy dates" and data to it, then I can dictate the x-axis to become the format I want, the issue is dummy dates + data, because then it doesn't accurately model my database, so I want to avoid something like this.
What I've done so far is look over the documentation, I've tried adding in the type: "time" format to xscale, but I'm getting error
v.getTime() is not a function.
You have to add format to both ResponsiveLine Component and xScale property in order to use a time scale
xFormat:
Optional formatter for x values.
The formatted value can then be used for labels & tooltips.
If you use a time scale, you must provide a time format as values are converted to Date objects.
Complete config: (Working demo)
import React from "react";
import { ResponsiveLine } from "#nivo/line";
export default function App() {
return (
<div style={{ height: 350 }} className="App">
<ResponsiveLine
data={[
{
id: "LineOne",
data: [
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }
]
},
{
id: "LineTwo",
data: [
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }
]
},
{
id: "LineThree",
data: [
{ x: "2020-02-01", y: 4 },
{ x: "2020-03-01", y: 6 },
{ x: "2020-04-01", y: 1 }
]
}
]}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{
type: "time",
format: "%Y-%m-%d"
}}
xFormat="time:%Y-%m-%d"
yScale={{
type: "linear",
min: "auto",
max: "auto",
stacked: false,
reverse: false
}}
axisTop={null}
axisRight={null}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "count",
legendOffset: -40,
legendPosition: "middle"
}}
axisBottom={{
format: "%b %d",
//tickValues: "every 2 days",
// tickRotation: -90,
legend: "time scale",
legendOffset: -12
}}
colors={{ scheme: "nivo" }}
pointSize={10}
pointColor={{ theme: "background" }}
pointBorderWidth={2}
pointBorderColor={{ from: "serieColor" }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: "bottom-right",
direction: "column",
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: "left-to-right",
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: "circle",
symbolBorderColor: "rgba(0, 0, 0, .5)",
effects: [
{
on: "hover",
style: {
itemBackground: "rgba(0, 0, 0, .03)",
itemOpacity: 1
}
}
]
}
]}
/>
)
</div>
);
}
modified the following things and tested with random (none sorted data)
xscale type to time with the format
add indexBy="date" property to responsiveline element
add format: "%Y-%m-%d" to your axis bottom,
you can find a working example here
https://codesandbox.io/s/laughing-mestorf-zeozb
export default function App()
{ return (
<div style={{ height: 350 }} className="App">
<ResponsiveLine
data={[
{
id: "LineOne",
data: [
{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 },
{ x: "2017-09-01", y: 6 }
]
},
{
id: "LineTwo",
data: [
{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 },
{ x: "2018-09-01", y: 3 }
]
},
{
id: "LineThree",
data: [
{ x: "2020-02-01", y: 4 },
{ x: "2020-03-01", y: 6 },
{ x: "2020-04-01", y: 1 }
]
}
]}
indexBy="date"
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{
type: "time",
format: "%Y-%m-%d",
precision: "day"
}}
yScale={{ type: "linear", stacked: false, min: 0, max: "auto" }}
axisTop={null}
axisRight={null}
axisBottom={{
orient: "bottom",
tickSize: 5,
format: "%Y-%m-%d",
tickPadding: 5,
tickRotation: -65,
legend: "time",
legendOffset: 40,
legendPosition: "middle"
}}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "count",
legendOffset: -40,
legendPosition: "middle"
}}
colors={{ scheme: "nivo" }}
pointSize={10}
pointColor={{ theme: "background" }}
pointBorderWidth={2}
pointBorderColor={{ from: "serieColor" }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: "bottom-right",
direction: "column",
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: "left-to-right",
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: "circle",
symbolBorderColor: "rgba(0, 0, 0, .5)",
effects: [
{
on: "hover",
style: {
itemBackground: "rgba(0, 0, 0, .03)",
itemOpacity: 1
}
}
]
}
]}
/>
)
</div>
);
}
Another thing to note is that in the above answers, the date on the actual chart is -1 from the date in the data. To solve this, add "useUTC: false" to your xScale props.
I have extended a component and I can't get it to render to a panel. Seems like I am missing something pretty basic since the debugger in Chrome actually shows that the panel has the data, it just isn't showing up.
Here is the fiddle and here are parts of the code:
Custom Component:
Ext.define('StoplightControl', {
extend: 'Ext.draw.Component',
alias: 'widget.Stoplight',
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent: function () {
var kpiData; // = Ext.data.StoreManager.get('KPIStore').getById(this.model.get('KPI_ID'));
if (typeof (kpiData) === 'undefined' || kpiData == null) {
kpiData = Ext.create('KPIModel', {
ControlBackground: '#000000',
Caution_label: 'On',
Good_label: 'Ahead',
Poor_label: 'Behind',
Good_color: '#00FF00',
Poor_color: '#ff0000',
Caution_color: '#550000',
Header: 'Test'
});
}
this.setGradients(kpiData.get('ControlBackground'));
this.drawItems(this.model, kpiData);
},
setGradients: function (controlColor) {
this.gradients = [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: controlColor,
opacity: 1
},
50: {
color: controlColor,
opacity: .6
},
100: {
color: controlColor,
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}]
},
drawItems: function (model, kpiData) {
var cautionValueX = -22.5 * (model.get('cautionValue').toString().length) + 227.5,
goodValueX = -22.5 * (model.get('goodValue').toString().length) + 227.5,
poorValueX = -22.5 * (model.get('poorValue').toString().length) + 227.5,
maxLineLength = 15,
changeOfY = -50,
cautionLabel = linebreaks(kpiData.get('Caution_label'), maxLineLength),
goodLabel = linebreaks(kpiData.get('Good_label'), maxLineLength),
poorLabel = linebreaks(kpiData.get('Poor_label'), maxLineLength),
cautionChangeY = (cautionLabel.split("\n").length - 1) * changeOfY,
goodChangeY = (goodLabel.split("\n").length - 1) * changeOfY,
poorChangeY = (poorLabel.split("\n").length - 1) * changeOfY,
headerFontSize = '100px arial,sans-serif',
textFontSize = '80px arial,sans-serif';
var drawItems = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x: 224,
y: 896,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Good_color')
}, {
type: "circle",
x: 224,
y: 214,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Poor_color')
}, {
type: "circle",
x: 224,
y: 555,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Caution_color')
}, {
type: "text",
id: "svg-stoplight-poorValue",
text: model.get('poorValue'),
x: poorValueX,
y: 220,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionValue",
text: model.get('cautionValue'),
x: cautionValueX,
y: 560,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodValue",
text: model.get('goodValue'),
x: goodValueX,
y: 900,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-poorLabel",
text: poorLabel,
x: 500,
y: 220 + poorChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionLabel",
text: cautionLabel,
x: 500,
y: 560 + cautionChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodLabel",
text: goodLabel,
x: 500,
y: 900 + goodChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-headerLabel",
text: kpiData.get('Header'),
x: 145,
y: -40,
fill: "Black",
font: headerFontSize
}, {
type: "text",
id: "svg-stoplight-totalLabel",
text: "Total = " + model.get('total'),
x: 100,
y: 1250,
fill: "Black",
font: textFontSize
}];
//don't add gradients if IE is > 10 or documentMode is less than 9
if (!(ie > 10 || document.documentMode < 9)) {
drawItems.push({
type: "ellipse",
id: 'test1',
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
});
}
},
width: 210,
height: 250
});
Creation of the Panel and adding the component:
var displayPanel = Ext.create('widget.panel', {
width: 600,
height: 800,
title: 'Cost & Schedule Variance',
renderTo: 'WorkstreamStoplights',
pack: 'center',
shrinkWrap: 3,
layout: {
type: 'table',
column: 2
},
});
stoplightStore.each(function (model, idx) {
var stoplight = Ext.create('StoplightControl', {
model: model
});
displayPanel.add(stoplight);
});
displayPanel.doLayout();
As you'll be able to see from the fiddle, the Title displays properly and I have even added an item to the displayPanel on creation, but doing a .add() doesn't seem to have any effect even with the .doLayout()
Haven't dabbled in ExtJS for a long time, but the 4.2 doc states, for this method:
This method needs to be called whenever you change something on this
component that requires the Component's layout to be recalculated.
Ah, silly me. I needed to add items to my component. I needed to make the assignment in the initComponents of
this.items = drawItems;
Working fiddle