Develop Reference

Chart.js zoom instantly zooms in fully on first point no matter what type of zoom used

After adding zoom to my line chart no matter what I do it instantly zooms in to the first point without the option to zoom back out (outside of the reset zoom function). The zoom out function also doesnt work, zoom in function results in the same problem.
Normal
After any attempt to zoom
const pdmdata = JSON.parse(document.getElementById('div_pdmdata').dataset.chart);
const ctx = document.getElementById('canvasChart_1').getContext("2d");
const radars = {'hidden': 'hidden'};
let linechartData = {
datasets: [{
label: 'Constant',
data: pdmdata[0],
borderWidth: 1
}]
};
for (let i = 0; i < Object.keys(pdmdata[1]).length; i++) {
linechartData.datasets.push({
label: radars[Object.keys(pdmdata[1])[i]],
data: pdmdata[1][Object.keys(pdmdata[1])[i]],
borderWidth: 1,
tension: 0.1
});
}
const config = {
type: 'line',
data: linechartData,
options: {
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Mode S'
},
zoom: {
zoom: {
drag: {
enabled: true,
// mode: 'x',
threshold: 24
},
mode: 'x'
}
}
},
scales: {
x: {
reverse: true
}
},
elements: {
point: {
radius: 0
}
}
},
};
myChart = new Chart(ctx, config);
function resetZoom(){
myChart.resetZoom();
}
I've tried all the zoom types; zoom, drag and pan. Even using drag in the middle of the chart makes it end up like the zoomed image above. No errors in console whatsoever. I've also tried setting the speed to 0.001 but to no avail. Weirdest thing is when I make a duplicate of this chart below it that one does zoom as intended. I have no idea why it would though.

Okay so I found my issue, chartjs-zoom does not like objects as data without also setting labels yourself. Here's an example: (Only used 1 dataset while testing to make it easier to test)
This works:
let linechartData = {
label: ['one', 'two', 'three', 'four', 'five'],
datasets: [{
label: 'Constant',
data: [1, 2, 3, 4, 5],
borderWidth: 1
}]
};
This does not work:
let linechartData = {
datasets: [{
label: 'Constant',
data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
borderWidth: 1
}]
};
But this does:
let linechartData = {
label: ['one', 'two', 'three', 'four', 'five'],
datasets: [{
label: 'Constant',
data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
borderWidth: 1
}]
};
So conclusion, when using chartjs-zoom always assign the labels beforehand instead of letting a dataset data object assign them automatically, which works just fine for normal charts without zoom. Never figured out why if I made a 2nd chart with the exact same config that chart did work though.

echarts: How to use subscript/superscript (or latex/mathjax) in 3D axis labels?

How do I render superscript or subscript in a 3D chart?
Right now I'm doing like this:
xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },
and the y-axis label in the plot looks like this:
Instead of f2, is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?
Also, is there any way to use latex or mathjax within echarts?

As I know Echarts doesn't have this or similar features. But even if it did, it’s not enough. Need improve the zRender (visualization engine) to support this feature.
I would to recommend for you to capture the values and replace to Unicode symbol in formatter, see example:
var myChart = echarts.init(document.getElementById('main'));
var chars = ['\u00BC', '\u00BD', '\u00BE', '\u2150', '\u2151', '\u2152'];
var option = {
xAxis: [{
data: [0, 1, 2, 3, 4, 5],
axisLabel: {
formatter: (val, idx) => chars[parseInt(val)],
}
}],
yAxis: [{}],
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Addition:
Online Converter LaTeX expression to Unicode
Ready to use library on npm
P.S. Just for my: have you ever seen JS-charts with embedded Latex?

Show a "Bar" for zero results with morris.js

I'm using Morris.js to display data in charts, Id like to show a bar for every option, even if its zero, currently I get this:
As you can see the values for 'HIV Instant' for age group 21-25 and 26-30 are 0, how would I show a line (just a thin one) for each result? is this possible with Morris? I've searched the docs for bar charts & searched google & SO but cant find anything? Any help is appreciated. Cheers
Here is the code for generating said chart:
// break up the object
var age_barParts = [];
$.each( results_by_age_chart, function(key , val){
age_barParts.push({
'test': key,
'u16': val['u16'],
'16-20': val['16-20'],
'21-25': val['21-25'],
'26-30': val['26-30'],
'31-49': val['31-49'],
'50+': val['50+']
});
});
//build the graph
var age_bar = Morris.Bar({
element: 'age_bar',
data: age_barParts,
xkey: ['test'],
ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
barColors: color_array,
hideHover: 'auto',
resize: 'true',
gridTextSize: 16,
gridTextColor: '#5cb85c',
xLabelAngle: '70',
resize: true,
padding: 40
});

In Morris.js there is no option to force drawing of a line for zero values, but you can set them to a very low non-zero value, for example 0.05.
Below an example with Morris:
var age_barParts = [];
age_barParts.push({
'test': 'HIV',
'u16': 3,
'16-20': 5,
'21-25': 1,
'26-30': 2,
'31-49': 8,
'50+': 2
});
age_barParts.push({
'test': 'HIV Instant',
'u16': 1,
'16-20': 4,
'21-25': 0.05,
'26-30': 0.05,
'31-49': 7,
'50+': 3
});
var age_bar = Morris.Bar({
element: 'age_bar',
data: age_barParts,
xkey: ['test'],
ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
hideHover: 'auto',
resize: 'true',
gridTextSize: 16,
gridTextColor: '#5cb85c',
xLabelAngle: '70',
resize: true,
padding: 40
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="age_bar" style="height: 450px;"></div>
As alternative you can adopt Highcharts which has a specific plotOption.
Below an example with Highcharts:
$(function () {
$('#age_bar').highcharts({
chart: {
type: 'column'
},
title: {
text: 'HIV stats'
},
xAxis: {
categories: ['HIV', 'HIV Instant']
},
yAxis: {
title: {
text: '#'
}
},
plotOptions: {
column: {
minPointLength: 3
}
},
colors: ["#0b62a4","#7a92a3","#4da74d","#afd8f8","#edc240","#cb4b4b","#9440ed"],
series: [{
name: 'u16',
data: [1, 0]
}, {
name: '16-20',
data: [5, 4]
}, {
name: '21-25',
data: [1, 0]
}, {
name: '26-30',
data: [2, 0]
}, {
name: '31-49',
data: [8, 7]
}, {
name: '50+',
data: [2, 3]
}],
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="age_bar" style="height: 450px;"></div>
Update:
Here is a jsfiddle (for Morris) which modifies the hover legend replacing 0.05 with 0. You can improve this approach editing the hoverCallback function:
https://jsfiddle.net/beaver71/zm8wt4pj/

If you compile from coffee script files, just add after lastTop += size in morris.bar.coffee
if size == 0 then size = 1
Otherwise, if you just want to modify the javascript file, just add after lastTop += size; in morris.js
if (size === 0) { size = 1; }

Chartjs v7.0 with plugin zoom, strange effect when use "drag" mode.

I try to use the plugin zoom from chartjs with the version 7 of the api.
I would like to be able to zoom when the selection of a zone of drag is finished.
Once zoomed, I would like to be able to move the chart to reach the other values.
I have try the v4,v5,v6 whith the zoom plugin but the result is always the same : When I try to select the drag zone all the chart move, it moves incredibly fast and its begin difficult to use it.
May be I don't use correctly the plugin but I've tried some other configuration the result is still the same..
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
type: 'line',
data: {
labels: [0, 1, 3, 4, 5, 6],
datasets: [{
label: 'Test1',
data: [12, 19, 3, 5, 2, 3]
},{
label: 'Test2',
data: [14, 16, 4, 3, 1, 2]
}
]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
drag: true,
enabled: true,
mode: 'xy'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.5.0/chartjs-plugin-zoom.min.js"></script>
<canvas id="myChart" height=200/>

I solved this problem in my project:
first changed :zoom: {
sensitivity:0.5,
drag: true,
enabled: true,
mode: 'xy'
}
second changed plugin as in this post:
pan on chart.js also zoom on line charts
my plugin version is 5.

jQuery Flot Chart add label per series

I am using http://www.flotcharts.org/ library to draw 2 connected series.
I can create Graph successfuly, you can see my JSFIDDLE below.
To do:
The problem is I want to add one label to the top-center of each series.
And I want to add label in such a way that if graph is resized it stays at top-center of series.
How can I do that ?
IMAGE:
JSFIDDLE:
http://jsfiddle.net/bababalcksheep/ktZ5X/2/
HTML/CSS:
html, body {height: 100%; }
JS:
var options = {
series: {
lines: { show: true,lineWidth: 2,fill: true},
points: { show: true,radius: 3,lineWidth: 1},
shadowSize: 2
},
legend: { show: false}
};
var DATA = [{
"label": "Group-1",
"data": [
[0.25, 0.25],
[0.5, 0.5],
[0.875, 0.875],
[1, 1]
]
}, {
"label": "Group-2",
"data": [
[1, 0.5],
[1.25, 0.25],
[1.5, 0.5],
[1.88, 0.875],
[2, 1]
]
}];
var plot = $.plot("#placeholder", DATA, options);

I agree with #iLikePrograms adding it in a hook event is the best approach. Here's an updated fiddle.
In your options add:
hooks: { drawSeries : [addLabel] }
Where the addLabel function is:
addLabel = function(plot, ctx, series){
var xaxis = series.xaxis;
var yaxis = series.yaxis;
// space midway on series
var x = (series.data[series.data.length-1][0] + series.data[0][0])/2;
// just below top of plot
var y = yaxis.max - (yaxis.tickSize / 2);
ctx.font = "16px 'Segoe UI'";
ctx.fillStyle = "black";
var text = series.label;
ctx.fillText(text, xaxis.p2c(x), yaxis.p2c(y)); // add the label
}

You can use the comments plugin for that. See this updated fiddle for a start.
New options:
comment: {
show: true
},
comments: [{
x: 0.625,
y: 1,
contents: "Group-1"
}, {
x: 1.5,
y: 1,
contents: "Group-2"
}]