How to make gauge charts edges rounded plotly js? - javascript

I want to make this charts edges rounded, how can I do that? I've tried:
border-radius: 100%;
stroke-linejoin: round;
stroke-linecap:round;
none of them worked.
If I give stroke-width: 1, it become slightly rounded but I want it to be completely rounded.
My code:
import Plot from 'react-plotly.js';
const AngularGaugeChart = () => {
const data: any = [
{
domain: {
x: [0, 1],
y: [0, 1],
},
value: 96,
title: {
text: 'Tempture',
font: { size: 24 },
},
type: 'indicator',
mode: 'gauge+number',
gauge: {
axis: {
range: [0, 100],
tickwidth: 0,
tickformat: '',
tickcolor: 'transparent',
},
bar: {
color: 'gray',
thickness: 0.9,
},
bgcolor: 'white',
},
},
];
const layout = {
autosize: true,
margin: {
t: 0,
b: 0,
l: 50,
r: 50,
},
paper_bgcolor: '#262626',
font: {
color: '#fff',
family: 'Roboto',
},
};
return (
<>
<Plot
style={{ width: '50%', height: '50%', margin: 'auto' }}
useResizeHandler={true}
data={data}
layout={layout}
/>
</>
);
};
export default AngularGaugeChart;
Here is the picture of current status. I'm trying to make these edges rounded.

Related

How to draw ApexCharts crosshair line from the marker (y value) to the bottom?

Using apexchart
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88]
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"]
new ApexCharts(chart, {
chart: {
height: 165,
type: "area",
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ["#00f"],
dataLabels: {
enabled: false
},
series: [{
name: "Series 1",
data: data
}],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999"],
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999"],
},
formatter: function(value) {
return `${value}%`;
}
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Now the blue line is equal to the height of the graph
Please tell me how to make the line start from the marker to the bottom line x
I will be glad for any help

I do not think you can do this with simple configuration. However, since ApexCharts is based on SVG, you can manipulate the DOM yourself quite easily.
As I said previously in other answers, because I have already used this technique several times, what I am going to show you is more experimental than official.
It works, though.
In your case, the idea is to put some code in the mouseMove event callback. The use of a MutationObserver is recommended to watch for changes in the DOM. When a marker (which is a circle) is hovered, its r, cx and cy attributes are updated. In particular, cy is the most interesting because it gives us the vertical position of the active marker. r is also useful to adjust the offset of crosshairs.
Here is the main part of the code:
chart: {
// ...
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
Here is the full code:
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88];
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"];
new ApexCharts(chart, {
chart: {
height: 165,
type: 'area',
toolbar: {
show: false
},
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ['#00f'],
dataLabels: {
enabled: false
},
series: [{
name: 'Series 1',
data: data
}],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999']
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999']
},
formatter: value => `${value}%`
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

How can I show 0 value in #nivo/bar graph, or is there any way to show No Data label if the value is 0 coming from api

I want to show 0 value on the Nivo Bar Graph, when the value is 0 it's now showing any line, is there any way to show 0 value in Bar graph. How can we add a No Data label if the value is zero on the graph line?
Graph Image
In the above picture link, the Budget and Quality Assurance percentage is 0, I want to show no data label on this line
Here is the code:
<ResponsiveBar
data={this.state.compComparisonDataDivisionWiseDMEApi.data}
keys={this.state.compComparisonDataDivisionWiseDMEApi.keys}
indexBy="type"
margin={{ top: 100, right: 0, bottom: 60, left: 100 }}
padding={0.3}
innerPadding={10}
label={d => `${d.value}%`}
// onClick={e => this.barChartClicked(e)}
groupMode="grouped"
colors={["#3d1f42", "#542b5a", "#68366f", "#93519c", "#68356f", "#93519c"]}
layout="vertical"
enableGridY={false}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
fill={[
{
match: {
id: 'fries'
},
id: 'dots'
},
{
match: {
id: 'sandwich'
},
id: 'lines'
}
]}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendPosition: 'middle',
legendOffset: 50
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendPosition: 'middle',
legendOffset: -60
}}
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[
{
dataFrom: 'keys',
anchor: 'top-right',
direction: 'column',
justify: false,
translateX: -100,
translateY: -100,
itemsSpacing: 2,
itemWidth: 150,
itemHeight: 25,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 20,
effects: [
{
on: 'hover',
style: {
itemOpacity: 1
}
}
]
}
]}
animate={true}
motionStiffness={90}
motionDamping={15}
/>

In the latest version of #nivo/bar (0.67.0 at this time), the bar with value zero are not filtered out. With zero values you will have :
To move the label up only for those with values 0, you can override the label props:
<ResponsiveBar
.....
label={(d) =>
d.value === 0 ? <tspan y="-15">{d.value}</tspan> : d.value
}
.....
/>
which gives:
Sandbox

How to change the font size of a value in a Gauge chart (Plotly.js)

Does anyone know how to change the font size of a value in a Gauge chart from Plotly.js? I wanted to make the font smaller (the number “20” below), in a way that didn’t stay above the title of the chart. I looked through Plotly.js reference, but couldn't find anything.
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);
Link to codepen: https://codepen.io/amandasantosf/pen/qBaNbGK

This can be due using the "number" field, as seen here https://plotly.com/javascript/reference/indicator/#indicator-number-font-size
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
number: { font: { size: 20 }},
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);

Add percentage symbol to gauge indictor in plotly.js

I have a gauge from plotly.js, which currently looks like this:
I need to add the percentage symbol to the number (96 in this example). Trying to achieve this:
My current data and layout are:
var data = [{
domain: {
x: [0, 1],
y: [0, 1]
},
value: 96,
title: {
text: "my title"
},
type: "indicator",
mode: "gauge+number",
gauge: {
axis: {
range: [0, 100],
tickwidth: 0,
tickformat: "",
tickcolor: "transparent"
},
bar: {
color: "limegreen"
},
bgcolor: "purple",
borderwidth: 2,
bordercolor: "white",
steps: [{
range: [0, 1],
color: "grey"
}, {
range: [0, 1],
color: "purple"
}],
threshold: {
line: {
color: "red",
width: 4
},
thickness: 0.75,
value: .75
}
}
}];
var config = {
responsive: true,
"displayModeBar": false
}
var layout = {
width: 280,
height: 200,
margin: {
t: 0,
b: 0,
l: 50,
r: 50
},
paper_bgcolor: "transparent",
font: {
color: "whitesmoke",
family: "Arial"
}
};
Plotly.newPlot(target_id, data, layout, config)

under value: 96, add number: { suffix: "%" }

Tool tip for static plotline in y-axis

I have drawn two static lines in my chart to indicate high and low range. I could keep labels for the line but I can't keep a tooltip for the the static line. Is there any way I can do this?
yAxis: {
plotLines: [{
value: 70,
width: 1,
color: '#68AF46'
label: {
style: {
color: '#FE7246',
fontWeight: 'bold'
},
text: '70',
align: 'right',
x: -10,
y: 16
},
},
{
value: 180,
width: 1,
color: '#FE7246',
label: {
text: '180',
align: 'right',
style: {
color: '#FE7246',
fontWeight: 'bold'
},
},
}]
}
I find no property to keep tooltip for plotlines.

I don't think this functionality exists by default in Highcharts, but you could create it by listening for the mouseover event on your plotLine and creating the tooltip manually. Then, on mouseout, just dismiss the tooltip.
Here's an example with a plotLine with tooltip on y = 50:
Highcharts.chart('container', {
chart: {
styledMode: true
},
title: {
text: 'Tooltip On PlotLine'
},
yAxis: {
plotLines: [{
value: 50,
width: 1,
color: '#68AF46',
label: {
style: {
color: '#FE7246',
fontWeight: 'bold'
},
text: '50',
align: 'right',
x: -10,
y: 16
},
events: {
mouseover: function(e) {
var series = this.axis.series[0];
var chart = series.chart;
var PointClass = series.pointClass;
var tooltip = chart.tooltip;
var point = (new PointClass()).init(
series, ['PlotLine', this.options.value]
);
var normalizedEvent = chart.pointer.normalize(e);
point.tooltipPos = [
normalizedEvent.chartX - chart.plotLeft,
normalizedEvent.chartY - chart.plotTop
];
tooltip.refresh(point);
},
mouseout: function(e) {
this.axis.chart.tooltip.hide();
}
}
}, ]
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
series: [{
data: [10, 30, 20, 60, 80]
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 400px;
max-width: 800px;
margin: 0 auto;
}
.highcharts-tooltip-box {
fill: black;
fill-opacity: 0.6;
stroke-width: 0;
}
.highcharts-tooltip text {
fill: white;
text-shadow: 0 0 3px black;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

You can also add two additional dummy series and hide them under the plot lines:
series: [{
data: [1, 50, 100, 200]
}, {
data: [70, 70, 70, 70],
showInLegend: false,
lineWidth: 0.5,
color: 'transparent',
marker: {
radius: 0
},
tooltip: {
pointFormat: 'plotLine1'
}
}, {
data: [180, 180, 180, 180],
showInLegend: false,
color: 'transparent',
marker: {
radius: 0
},
tooltip: {
pointFormat: 'plotLine2'
}
}]
Live demo: http://jsfiddle.net/BlackLabel/2Ln05yes/
API Reference: https://api.highcharts.com/highcharts/series.line.tooltip

Categories

Resources