Develop Reference

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);

Trouble gettings CanvasJS to color just the coordinates in the tooltip

The tooltip text:
10
Dataseries 1: 71
Dataseries 2: 77
I'm trying to get the tooltip so the Dataseries 1: and Dataseries 2: remain their current color, and the 10, 71, and 77 are colored red. I have tried toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ", but it doesn't change anything. I'm sure its a stupid mistake on my part, but I'm new to using CanvasJS and haven't been able to get anything to work. (https://jsfiddle.net/lightmaster/8p3ygwf1/)
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "RGBA(37, 41, 45, 0.9)",
animationEnabled: true,
title: {
text: " ",
fontSize: 11,
fontColor: ' #ccc',
fontFamily: "arial",
},
toolTip: {
fontStyle: "normal",
cornerRadius: 4,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
shared: true,
},
axisX: {
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 10,
labelFontColor: ' #ccc',
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
titleFontFamily: "arial",
labelFontFamily: "arial",
interval: "auto",
intervalType: "hour",
minimum: 0,
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#ccc",
labelFontSize: 14,
labelBackgroundColor: "#FF8841",
}
},
axisY: {
title: "Temperature (°F) Recorded",
titleFontColor: "#ccc",
titleFontSize: 10,
titleWrap: false,
margin: 10,
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
includeZero: false,
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 11,
labelFontColor: ' #ccc',
titleFontFamily: "arial",
labelFontFamily: "arial",
labelFormatter: function(e) {
return e.value.toFixed(0) + " °F ";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#fff",
labelFontSize: 12,
labelBackgroundColor: "#FF8841",
valueFormatString: "#0.# °F",
}
},
legend: {
fontFamily: "arial",
fontColor: "#ccc",
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
},
{
type: "spline",
dataPoints: [
{ x: 10, y: 77 },
{ x: 20, y: 53 },
{ x: 30, y: 58 },
{ x: 40, y: 61 },
{ x: 50, y: 99 },
{ x: 60, y: 60 },
{ x: 70, y: 20 },
{ x: 80, y: 31 },
{ x: 90, y: 26 }
]
}
]
});
chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

At the chart level, instead of toolTipContent you need content. Your toolTipContent code is currently being ignored because that's the property used only at the data level. Here is how you can set a style directly, doing basically what you asked for:
toolTip: {
fontStyle: "normal",
cornerRadius: 14,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
shared: true,
}
Because you are using shared: true, your x value will show up twice. If you don't want that, look into the contentFormatter function for Shared toolTip section in the docs.

Plotly.js - Hover label of multiple traces overlaps with xaxis hover label

I'm facing an issue where the hover label of multiple traces overlaps with the x-axis's hover label when all the trace values are close to 0.
In the example below, you can see the overlap when you mouseover x=1000
const data = []
const x = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
data.push({
x: x,
y: [100, 105, 132, 150, 130, 103, 2, 200, 301, 1],
});
data.push({
x: x,
y: [200, 205, 232, 250, 230, 193, 1, 100, 201, 0],
})
data.push({
x: x,
y: [0, 205, 232, 250, 230, 193, 10, 100, 0, 0],
})
const layout = {
height: 350,
xaxis: {
// tickformat: ',.2r',
},
hoverlabel: {
font: {
family: 'Helvetica Neue',
size: 11,
}
}
}
Plotly.plot('graph', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
https://codepen.io/anon/pen/RBpQPg
Any workarounds would be appreciated. For example, would it be possible to combine all the hover labels into 1 label somehow?

Data format issue in Vue JS

I'm trying to implement vue-chart-js in my VueJS 2.0 application, I went through the documentation and I'm using the component like:
<div class="row">
<vue-chart type="bar" :options="options" :data="chartData" style="width: 100%;height: 310px;"></vue-chart>
</div>
In data() I'm defining:
//for chart
options: {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
//stacked: true,
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
display: true,
//stacked: true,
ticks: {
beginAtZero: true,
barPercentage: 0.2,
autoSkip: false,
},
}]
},
I did some static data set to get my chart working so my chartData looks like this:
if(type==="week"){
this.chartData.labels=['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
this.chartData.datasets= [
{
label:'Investor',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
else if(type==="month"){
this.chartData.labels=['1st Month', '2nd Month', '3rd Month', '4th Month', '5th Month', '6th Month']
this.chartData.datasets= [
{
label:'Investor',
data: [90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
Now I pointed the same to the api calls so I did something like this:
axios.get('api/interaction/chart?timeFormat='+type, {headers: getHeader()}).then(response => {
if(response.status === 200)
{
this.chartData = response.data.chartData
console.log(this.chartData)
}
})
In response or in console.log I'm having the format something like this:
{
"labels":["1st Week","2nd Week","3rd Week","4th Week","5th Week","6th Week"],
"datasets":[
{"label":"Investor","data":[0,0,0,0,0,0],"backgroundColor":"rgb(26, 179, 148)","borderColor":"rgb(26, 179, 148,1)"},
{"label":"Research","data":[0,0,0,0,0,0],"backgroundColor":"rgb(138, 209, 194)","borderColor":"rgb(26, 179, 148,1)"}
]
}
I'm getting an error of:
Invalid prop: type check failed for prop "data". Expected Object, Array, got String.
found in---> <VueChart>
I tried using JSON.parse(response.data.chartData) but this also not helping me out. Guide me on this.
Thanks

Highcharts : Data loaded, DOM updated but not display

I tried to create a chart but i get no display in my html page whereas DOM element seems to be well loaded.
Here is the code of My JS function to create the chart :
this.updateUsageChart = function updateUsageChart() {
var jsonData = {
categories : ['01/12/2015', '02/12/2015', '03/12/2015', '04/12/2015', '05/12/2015', '06/12/2015', '07/12/2015', '08/12/2015', '09/12/2015', '10/12/2015'],
series : [
{
name: 'MAX',
data: [170, 170, 170, 170, 170, 170, 170, 170, 170, 170]
}, {
name: 'MIN',
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
}, {
name: 'test1',
data: [30, 40, 35, 40, 35, 200, 112, 210, 140, 190]
}, {
name: 'test2',
data: [30, 40, 35, 40, 35, 170, 112, 170, 140, 170]
}
]
}
var categories = jsonData.categories ; // Array of String
var series = jsonData.series;
$('#usageChart').highcharts({
title: {
text: 'Test',
x: -20 //center
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
}
I included library in my index.html file :
<script src="../../lib/jquery/jquery.js"></script>
<script src="../../lib/highcharts/highcharts.js"></script>
<script src="../../lib/highcharts/exporting.js"></script>