Develop Reference

charts js, doughnut chart not rendering tooptips correctly

i have a multilevel donut chart but it is not rendering correctly here is code
the problem is, onmouseover on all green parts it says objects, on all grey parts it says products, solution i would like is, on outer ring it should say products, in middle objects, and inner most should be materials, grey areas should just show number. here is a jsfiddle of the problem
Code:
var op=93;
var ap=99;
var mp=66;
var ctx = new Chart(myChart, {
type: 'doughnut',
data: {
labels: ['Objects', 'Products', 'Materials'],
datasets: [{
label: 'Objects',
data: [op, 100 - op],
backgroundColor: ['#006a4e','#eeeeee'],
hoverOffset: 4
},{
label: 'Products',
data: [ap, 100 - ap],
backgroundColor: ['#2e856e', '#eeeeee'],
hoverOffset: 4
},
{
label: 'Materials',
data: [mp, 100 - mp],
backgroundColor: ['#5ca08e', '#eeeeee'],
hoverOffset: 4
}
]
},
options: {
//cutoutPercentage: 40,
height: 200,
width:200
}
});

You can achieve that fairly simple with Chart.JS 2.7.2. Add labels to each dataset like this:
data: {
labels: ['Existing', 'Non'],
datasets: [
{
labels: ['Objects', 'Non-objects'],
...
}, {
labels: ['Products', 'Non-products'],
...
},
{
labels: ['Materials', 'Non-materials'],
...
}
]
}
And add the following label tooltip callback:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
Demo: https://jsfiddle.net/adelriosantiago/fxd6vops/3/
I am sure it is possible with Chart.JS > 3.0 too but I have no idea how since quite a few things changed in the structure.

I had a same problem which took a lot of time but what worked in the end was importing these elements and initialising them ..
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
these are the elements that helps make the entire chart. you can't skip them

How can I fit series with different lengths inside same axis with Apache ECharts?

I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.

Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];

You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result

Align lines and bars in a mixed chart

I'm working on a mixed chart where I need to plot a stepped linechart on a barchart. The datapoints in my linechart are aligned in the middle of a bar by default like this:
I want to make the start of the line to align with the beginning of the bar like so:
I've been through the documentation of Chartjs but i can't find a way to make the line start at the beginning of my bar.
I setup a little example to explain my problem a little bit further:
var opc = $("#chart");
var myChart = new Chart(opc, {
type: 'bar',
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
type: 'bar',
label: 'Bar Component',
data: [10, 20, 30],
}, {
type: 'line',
steppedLine: true,
label: 'Line Component',
data: [25, 5, 20],
fill: false
}]
},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
}
});
Here is the link to a working fiddle: https://jsfiddle.net/7yheenc6/1/

I went through the documentation but couldn't find anything on how to fix this. I though it would be relatively simple to fix it through code, boy was I wrong, anyway I got it working, you need to manually change the code in chart.js source file. Here is the line you need to change
Before(chart.js):
Line number: 12891
function lineToPoint(previousPoint, point) {
var vm = point._view;
if (point._view.steppedLine === true) {
ctx.lineTo(point._view.x, previousPoint._view.y);
ctx.lineTo(point._view.x, point._view.y);
} else if (point._view.tension === 0) {
ctx.lineTo(vm.x, vm.y);
} else {
ctx.bezierCurveTo(
previousPoint._view.controlPointNextX,
previousPoint._view.controlPointNextY,
vm.controlPointPreviousX,
vm.controlPointPreviousY,
vm.x,
vm.y
);
}
}
After(chart.js):
Line number: 12891
function lineToPoint(previousPoint, point) {
var vm = point._view;
if (point._view.steppedLine === true) {
ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, previousPoint._view.y);
ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, point._view.y);
ctx.lineTo(point._view.x, point._view.y);
} else if (point._view.tension === 0) {
ctx.lineTo(vm.x, vm.y);
} else {
ctx.bezierCurveTo(
previousPoint._view.controlPointNextX,
previousPoint._view.controlPointNextY,
vm.controlPointPreviousX,
vm.controlPointPreviousY,
vm.x,
vm.y
);
}
}
Jsfiddle for reference: https://jsfiddle.net/Kai_Draord/7yheenc6/4/
Output:
I hope this solves your issue :)

Getting pie chart values dynamically in javascript

This is my pie chart js code:
window.onload = function(){
var pieData = [
{
value: 300,
color:getRandomColor(),
highlight: "#62b9fb",
},
{
value: 50,
color: "#ffb53e",
highlight: "#fac878",
},
{
value: 100,
color: "#1ebfae",
highlight: "#3cdfce",
},
{
value: 120,
color: "#f9243f",
highlight: "#f6495f",
}
];
var chart4 = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(chart4).Pie(pieData, {
responsive : true
});
};
I am using this javascript pluging. My pie chart it works but its values is gives statically. I believe that I have to use an ajax, which is not a problem. My problem is how can I create the piedata data format after I decoded the json and how can I create the color? I have to generate randomly colors? Can you help me with this ?

Perhaps I don't fully understand your question; but..
var colors = Highcharts.getOptions().colors, // references stock colors defined in highcharts.js
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0], // references stock color highcharts.js from color array
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], // JS data arrays
data: [10.85, 7.35, 33.06, 2.81], // data areas
color: colors[0] // references stock color highcharts.js color array
}
},
JSFIDDLE
For custom colors, outside of what is given to choose from via highcharts.js download that full js. Locate color array in there, and define your own via hex and call them.
If you need to pull data from a specific place, you need to specify..
Sample of an AJAX call with the chart:
var GetChartData = function () {
$.ajax({
url: serviceUri,
method: 'GET',
dataType: 'json',
success: function (d) {
chartData = {
labels: d.AxisLabels,
datasets: [
{

convert one dimension array into two dimension array

I want to implement plugin chart into my code, the chart code is like
chart = new Highcharts.Chart({
},
series: [{
type: 'pie',
name: 'criterin',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
I have array that I got from ajax function which contains the information that I want to replace into the chart.
for example, I alert sample array and result like:
post work,0.64,quality,0.35
How can I use my array to integrate with chart code.

So, if I'm understanding you correctly, you have an array that looks like this
['post work',0.64,'quality',0.35]
And you want it to look like this:
[
['post work', 0.64],
['quality', 0.35]
]
Something like this should work
function array1Dto2D(sourceArray) {
var array2D = [];
for (var i=0; i < sourceArray.length - 1; i+=2) {
var pair = [sourceArray[i], sourceArray[i+1]];
array2D.push(pair);
}
return array2D;
}
and be used something like this (Note I don't use highcharts, but I don't think the way you had it in your question was right, with the empty object as a first argument):
chart = new Highcharts.Chart({
series: [{
type: 'pie',
name: 'criterin',
data: array1Dto2D(my1dsourcedata)
}]
});