We Keep Coding

Apache Echarts: dataZoom's miniature misrepresents data in a managed plot (the plot drawn over the slider doesn't match the main plot's data)

When I create simple line plot/chart using Apache Echarts I also can add built-in data scaling mechanism: dataZoom. It reaches its main goal, but there is a question to scaled data representation, made by dataZoom. By default, dataZoom doesn't take into account the chart scale limits ticks or/and the minimum and maximum allowable values (range of a function, represented by the plot). Instead, the thumbnail of the chart is drawn on the specific value range passed to the plot in series section. In addition, everytime a small indent is added from the minimum and maximum values ​​to the borders of the graphic element.
As a result, the representation of the visualised data looks inconsistent with reality: null is not null, max is not max (because they don't match the lower and higher bounds of the coordinate area of ​​the thumbnail plot, respectively), the amplitude of the chart fluctuations does not correspond to the scale of real data fluctuations.
Screenshot
Is there a way (documented or undocumented) to remove the indents and force the plot to use the minimum and maximum values ​​allowed for the yAxis ticks?
I drawn a small example, it may be pasted to Echarts online editor.
let x = [];
let y = [];
let scaled = [];
/*y = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 300,
10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0, 0, 0
];*/
for (let i = 1; i < 300; i++) {
x.push(i);
element = Math.random() * 40 + 50;
y.push(element);
scaled.push(element * 6 - 250);
}
option = {
xAxis: {
data: x
},
yAxis: {
min: 0,
max: 300
},
dataZoom: [
{
start: 50,
end: 58.5
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
data: y
},
{
name: 'Simulated Scaling',
type: 'line',
symbol: 'none',
lineStyle: {
opacity: 0.3
},
data: scaled
}
]
};
As you can see, the magnitude of the fluctuations of the graph, drawn by dataZoom doesn't correspond rather to the main data, but to some kind of artificial transformation of them (light green graph). Then try to comment 11st line and uncomment lines from 4 to 7. At the start of the plot you'll see main graph touching y zero line, but not on the thumbnail.
I didn't find any params for dataZoom that make them to look like expected.

Highcharts negative color for zone in area?

Is there anyway to set the color for the negative portion of a zone?
My intention is to achieve something like this. Don't pay attention to the plotBands on the background.
You can use this as boilerplate.
https://jsfiddle.net/du2hobrt/

You can reduce series fillOpacity value and use Highcharts.SVGRenderer to add layers under the series, which will affect the color:
chart: {
events: {
load: function() {
var series = this.series[0].area,
plotLeft = this.plotLeft;
this.renderer.path().attr({
translateX: plotLeft,
translateY: this.plotTop,
d: series.d,
fill: 'rgba(255, 0, 0, 0.6)',
zIndex: 0
}).add();
this.renderer.rect(
plotLeft,
this.yAxis[0].toPixels(0),
this.plotSizeX,
this.plotTop + this.plotSizeY - this.yAxis[0].toPixels(0)
).attr({
fill: '#FFF',
zIndex: 0
}).add()
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/bsk3n0qz/
API: https://api.highcharts.com/highcharts/series.area.fillOpacity

Trying to use HighCharts to build solidgauge chart with multiple layer

I'm trying to build some chart like this one:
Chart Visual
But the main struggle is to add two different series that complement each other.
I really appreciate any help that someone could give me.
Many thanks in advance.

You can achieve it, but the process of implementation is not so easy. I prepared the example which shows how to do that, and I will try to explain what I did, step by step.
First, you need to define your data array just like that:
var data = [40, 30, 10, 20]
Then define your chart configuration, and inside of chart.events.load function handler put whole logic of creating desired effect.
Next step is iterate on all data positions, and create its own specific point, series, yAxis and pane, basing on calculations like below:
load() {
var chart = this,
series = [],
panes = [],
yAxes = [],
radius = 112,
innerRadius = 88,
pointAngle,
prevPointAngle = 0,
pointPadding = (radius - innerRadius) / 4,
colors = Highcharts.getOptions().colors,
additionalPointPadding = 2;
data.forEach(function(p, i) {
pointAngle = (p * 360) / 100 // Calculate point angle
// Prepare pane for each point
panes.push({
startAngle: prevPointAngle + pointPadding + additionalPointPadding,
endAngle: (pointAngle + prevPointAngle) - pointPadding - additionalPointPadding,
background: [{
backgroundColor: '#fff',
borderWidth: 0
}]
})
// Prepare yAxis for specific pane
yAxes.push({
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
pane: i
})
// Prepare series with specific point
series.push({
name: 'Exercise ' + i,
data: [{
color: colors[i],
radius: radius + '%',
innerRadius: innerRadius + '%',
y: 100,
percents: p
}],
yAxis: i
})
prevPointAngle += pointAngle
})
And finally, update our chart by new objects:
chart.update({
pane: panes,
yAxis: yAxes,
series: series
},true, true)
Last thing you have to know, that your chart configuration should have the same amount of empty objects in pane array, like the data positions, e.g:
var data = [10, 80, 10]
(...)
pane: [{},{},{}]
Here is the example which shows the final effect: https://jsfiddle.net/yamu5z9r/
Kind regards!

Highcharts - Guage - Changing the color and radius of the center black dot(circle)

http://jsfiddle.net/fwxbfu1u/2/
This is the jsfiddle for the highcharts guage graph. i have tried to change all the options and customise the chart. But not able to figure out the way to change the radius and color of the center dot.
shown in this image below
In this example .. how do i change the color and radius of the centre black dot.?

you can use plotOptions, see the link below
plotOptions: {
gauge: {
pivot: {
radius: 10,
borderWidth: 1,
borderColor: 'gray',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'white'],
[1, 'gray']
]
}
}
}
},
http://jsfiddle.net/fwxbfu1u/8/

Assuming the id of the div that contains gauge is "container"
var circle = $( "#container").find('circle');
$(circle).attr("r", 7 );
$(circle).attr("fill", 'green' );

$("#container").find("circle").attr("r", 15);
$("#container").find("circle").attr("fill", "red");
Just manualy find object and set attribute of it.
You can also set fill property by css like
circle{fill: rgb(255, 0, 0);}
But you cannot set radius by css, so I use both js ways.
http://jsfiddle.net/fwxbfu1u/6/

add value to Line chart.js

I work chartjs for show Line Chart. Now, I need to add title/value for each value mouse over In Line charts.
Js:
var data = {
labels: ["February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [ 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [ 48, 40, 59, -100, 127, 100]
}]
}
var options = {animation :true};
//Get the context of the canvas element we want to select
var c = $('#daily-chart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("daily-chart").getContext("2d");
/*************************************************************************/
//Run function when window resizes
$(window).resize(respondCanvas);
function respondCanvas() {
c.attr('width', jQuery("#daily").width());
c.attr('height', jQuery("#daily").height());
//Call a function to redraw other content (texts, images etc)
myNewChart = new Chart(ct).Line(data, options);
}
//Initial call
respondCanvas();
How Do can I add title/value for each value/month?
DEMO: jsFiddle

If you use the latest version of chart.js there is a new update allow you to show a tooltip with value/title. http://www.chartjs.org/docs/
There is several options to custom the tooltip on mouseover
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

I agree with #jbr
I have just updated the chart.min.js file link in your fiddle and you existing code shows tooltip on hover the chart..
check the updated fiddle