Develop Reference

How to change labels axis position of dynamic data values that are showing around the chart. I'm using Highcharts here

I want to change the axis position of data label 6.02%. How do I change it because this data is dynamic. Here's my code :
Highcharts.chart('container' + this.random, {
credits: {
enabled: false
},
title: {
text: this.graphtitle,
align: 'left',
style: {
fontSize: '12px',
},
},
chart: {
height: this.graphheight,
width: 500,
animation: false,
backgroundColor: 'transparent',
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#000',
align: 'left',
format: '{point.y} %', // added percentage sign here
overflow: 'justify', // prevent labels from being cut off
distance: 10, // increase distance between labels
x: -40,
y: -20,
//css
style: {
fontSize: '10px',
textOutline: 0,
},
connectorWidth: 0,
},
animation: true,
showInLegend: true,
},
},
yAxis: {
labels: {
staggerLines: 2,
enabled: true,
align: 'left',
padding: 0,
reserveSpace: true
},
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'right',
symbolHeight: 10,
symbolRadius: 0,
symbolPadding: 1,
itemMarginTop: 10,
itemMarginBottom: 5,
textOutline: 0,
itemStyle: {
fontSize: '10px',
textOutline: 0,
}
},
series: [{
enableMouseTracking: false,
type: 'pie',
innerSize: '65%',
colors: this.graphcolors,
data: this.graphdata,
},],
});
},
below is the visual of pie chart:
I was trying this method but it's not working with my code any other method anyone would like to suggest ?
chart.series[0].data[1].update({
dataLabels: {
align: 'center',
verticalAlign: 'middle',
inside: true
}
});

I suppose graphdata here is dynamic data passed as a props. I came across a similar kind of bottleneck recently.
What I did to resolve this error is following:
You can sort your data ascending or descending using life cycle hooks e.g. getting the highest value element at 0 index or getting the lowest value element at 0 index.
data property of series in high charts expects a object with name and other custom properties to app where graph data has values like
['value 1', 1],
['value 2', 2]
{
                  name: this.graphdata[0][0],
                  y: this.graphdata[0][1],
                  sliced: false,
                  selected: true,
                  dataLabels: {
                    x: -25,
                    y: -15
                  }
                },
               {
               name: this.graphdata[1][0],
               y: this.graphdata[1][1],
               sliced: false,
               selected: true,
               dataLabels: {
                 x: -60,
                y: -25
               }
},
  this.graphdata[2],
   ],`enter code here`

In your code, you put negative values for plotOptions.pie.dataLabels.x and plotOptions.pie.dataLabels.y. This is probably not the best strategy if you push data dynamically...
When you use setData() to update your series, Highcharts optimizes labels position automatically.
Here is a simple example:
let chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '65%',
dataLabels: {
format: '{point.y}',
distance: 10
}
}
},
series: [{
colors: ['red', 'green', 'blue'],
data: [10, 20, 15]
}]
});
function getInt() {
return chance.integer({ min: 1, max: 100 });
}
document.querySelector('button').addEventListener('click', () => {
chart.series[0].setData([getInt(), getInt(), getInt()]);
});
#container {
width: 350px;
height: 350px;
}
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chance#1.1.9/chance.min.js"></script>
<div id="container"></div>
<button type="button">Update</button>

Flot line chart; bug with time mode

I have a problem when I use Flot
I notice that it happens at the same minute but different second
2018/10/16 13:12:55 71.755
2018/10/16 13:12:09 71.700
2018/10/16 13:10:52 70.781
Here is my configuration:
//Display graph
$.plot($("#data-chart"), ds, {
colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: $chrt_border_color,
borderWidth: 0,
borderColor: $chrt_border_color
},
zoom: {
interactive: true
},
pan: {
interactive: true
},
selection: {
mode: "xy"
},
xaxis: {
ticks: 5,
mode: "time",
timeformat: "%d/%m/%y",
},
yaxis: {
min: 0,
ticks: 5,
max: 110,
panRange: [-10000, 10000]
},
tooltip: true,
legend: {
show: true,
noColumns: 4, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#000", // border color for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to avoid background
},
tooltipOpts: {
content: "<b>Date: %x</b> = <span>%y.3</span>",
dateFormat: "%d/%m/%y %H:%M:%S",
defaultTheme: false
},
});
Can someone help me?

High charts gauge-solid and different data sets

I'm using High charts gauge-solid. So I need to create below like chart.
Can you tell me how to give different data sets for this chart (each and every color has its own data)?
What I need is this:
This is what I have tried: jsfiddle
$(function () {
$('#gauge').highcharts({
chart: {
type: 'solidgauge',
backgroundColor: 'transparent'
},
title: null,
pane: {
center: ['50%', '70%'],
size: '130%',
startAngle: -120,
endAngle: 120,
background: {
backgroundColor: '#fff',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: [
[0.1, '#e74c3c'], // red
[0.5, '#f1c40f'], // yellow
[0.9, '#2ecc71'] // green
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
innerRadius: '75%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
}
},
series: [{
data: [83],
dataLabels: {
format: '<p style="text-align:center;">{y}%</p>'
}
}]
});
});

data array can contain more than one value for a series:
series: [{
data: [80, 150, 200]
}]
Live demo: http://jsfiddle.net/kkulig/tou6wwxj/
If you want every dial to move only within its own range then you can simply make sure that a proper value is assigned to a point while initializing or updating it.

Flot Chart - different color on single line chart based on data points

Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);

There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.

jQuery Flotcharts - show grid lines?

I'm using http://www.flotcharts.org/. Why do my grid lines disappear?
Here is code for my plot options:
var options = {
grid: {
markings: EVS,
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 1,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 1
}]
}
}
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)", "rgba(255, 255, 255, 1)"],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15
},
labelHeight: 15,
tickLength: 5
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10
},
max: vmax + 20,
min: 0,
minTickSize: 1,
tickSize:20,
tickLength: 10
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60
},
tooltip: true,
tooltipOpts: {
id: 'flotTip', //"flotTip"
content: '%x : %y km/h', //"%s | X: %x | Y: %y"
shifts: {
x: 10, //10
y: 20 //20
},
defaultTheme: true, //true
lines: {
track: true, //false
threshold: 0.01 //0.05
},
onHover: function (flotItem, $tooltipEl) {
if (flotItem.seriesIndex == 1) $tooltipEl[0].innerHTML = "Postój";
}
}
};
I just want simple yaxis lines.
PS. The crosshair is from the crosshair plugin.

Don't set the tickLength option if you want to have the lines at the ticks. Flot doesn't have "grid lines" per se, but tick lines which can run through the grid. If you only want them on one axis, set the option on one axis but not the other.
From the documentation (emphasis mine):
"tickLength" is the length of the tick lines in pixels. By default, the innermost axes will have ticks that extend all across the plot, while any extra axes use small ticks. A value of null means use the default, while a number means small ticks of that length - set it to 0 to hide the lines completely.