We Keep Coding

Chart.js Display Prediction Data

I'm trying to make a chart to display the revenues of a company, and I would like to display the predictions for this year but with a borderDash segment option. How could I do that? I tried this and I have no clue how to do it.
const lineCanvas = document.getElementById("lineCanvas");
const prediction = (ctx, value) => ctx.dataIndex = 4 ? value : undefined;
const lineChart = new Chart(lineCanvas, {
type: "line",
data: {
labels: ["2019", "2020", "2021", "2022"],
datasets: [{
label: "Revenues",
data: [2195, 2225, 2166, 2250],
backgroundColor: "orange",
borderColor: "orange",
segment: {
borderDash: ctx => prediction(ctx, [6, 6])
}
}]
},
options: {
scales: {
y: {
ticks: {
font: {
size: 18
},
stepSize: 10
},
title: {
display: true,
text: "Total",
font: {
size: 14
}
},
},
x: {
ticks: {
font: {
size: 18
}
},
title: {
display: true,
text: "Year",
font: {
size: 14
}
}
}
},
plugins: {
title: {
display: true,
text: "Company's Revenues",
font: {
size: 22
},
padding: 0
},
subtitle: {
display: true,
text: "(in millions of €)",
font: {
size: 18
},
padding: 0
}
}
}
});
Here's the expected result:
Image of the expected result
I hope somebody can help me with that.
Thanks in advance.

What about adding an extra dataset for your forecast data. Style this second set with a dashed line? Yes, that results in 2 datasets. One for the data and one for the prediction. Hope that helps.
As example (not tested, just as example):
const lineChart = new Chart(lineCanvas, {
type: "line",
data: {
labels: ["2019", "2020", "2021", "2022"],
datasets: [{
label: "Revenues",
data: [2195, 2225, 2166, 2250],
backgroundColor: "orange",
borderColor: "orange",
}, {
label: "Revenues",
data: [2195, 2225, 2166, 2250, 6000, 9000], /* Add the extra data points */
borderColor: "red" /* Whatever style you like */
}]
}, options:[] });

Highcharts - How to sort data by name?

I am currently working on a horizontal bar graph with Highcharts. I have 5 different categories Low, Medium Low, Medium, Medium High and High I would like to sort the data being returned from the graph by category name by descending order having Low be the starting point. For example, all Low data appears first in the graph, all Medium Low, all Medium appears next and so on.
I've done some research and it appears that the code below is what I need
dataSorting: {
enabled: true,
matchByName: true
},
but when applying this to HighCharts it did not affect my graph. Is this a feature that is provided in HighCharts? Is this something that is possible to do?
Here is a jsfiddle
My code:
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
color: '#C50710',
data: [data[5]]
}]
});
Current look:
Desired look:

You can use the index feature to define the affecting the order of rendering.
Demo: https://jsfiddle.net/BlackLabel/9Lsvmpbh/
series: [{
name: 'Low',
index: 4,
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}, {
name: 'Medium-Low',
index: 3,
color: '#0B7070',
data: [data[2]]
}, {
name: 'Medium',
index: 2,
color: '#DC9603',
data: [data[3]]
},{
name: 'Low',
index: 5,
color: '#0D6302',
data: [data[1]],
showInLegend: false
},
{
name: 'Medium-High',
index: 1,
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'High',
index: 0,
color: '#C50710',
data: [data[5]]
}]
API: https://api.highcharts.com/highcharts/series.line.index

You should reorder your series' objects. According to this, highchart doesn't have a property to sort automatically. You should insert first your Low series, then Medium Low etc. The thing you want to be the last one, you should put it first in the series.
Following this
let data = [10, 31, 13, 19, 21, 50, 10]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'sorted'
}
},
series: [{
name: 'High',
color: '#C50710',
data: [data[5]]
}, {
name: 'Medium-High',
color: '#DD5F0C',
data: [data[4]]
}, {
name: 'Medium',
color: '#DC9603',
data: [data[3]]
},{
name: 'Medium-Low',
color: '#0B7070',
data: [data[2]]
},
{
name: 'Low',
color: '#0D6302',
data: [data[1]],
showInLegend: false
}, {
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: true,
}]
});
I got this result:

i want to show value of each date side it's title on top-right

i have an donut-charte with chart.js library!
i want to show value of each data side on it's title on legend(like image that shown with red arrows)
this is my chart code:
var donutData = [
{ label: 'گوساله', data: 44, color: '#004586' },{ label: 'آبستن', data: 33, color: '#ff420e' },{ label: 'باز', data: 20, color: '#6db71c' },{ label: 'تلقيح شده', data: 19, color: '#984ea3' } ]
$.plot('#donut-chart', donutData, {
series: {
pie: {
show : true,
radius : 1,
label : {
show : true,
radius : 2 / 3,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: true
}
})
var donutData = [
{ label: 'گوساله', data: 44, color: '#004586' },{ label: 'آبستن', data: 33, color: '#ff420e' },{ label: 'باز', data: 20, color: '#6db71c' },{ label: 'تلقيح شده', data: 19, color: '#984ea3' } ]
$.plot('#donut-chart', donutData, {
series: {
pie: {
show : true,
radius : 1,
label : {
show : true,
radius : 2 / 3,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: true
}
})

this image:
is attach to prev post

Rendering json results to a pie chart in a div - highmaps

I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.
The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.
$(function() {
$.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
//THIS IS ACTUALLY WHAT'S NOT WORKING
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
}, {
name: 'jubilee',
color: '#C40401',
y: this.jubilee //returned json data for candidate 2
}],
dataLabels: {
// format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
//AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
},
legend: {
title: {
text: 'Plotical Parties'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' Incumbent Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'Jubilee'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Nasa'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Mandera",
"path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
}, //and a couple more mapdata
]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
});
});

Your JSON data contains number in string format so convert it into Number
like this
Fiddle link
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: Number(this.nasa) //transform to number
}, {
name: 'jubilee',
color: '#C40401',
y: Number(this.jubilee) //transform to number
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]

Additional tooltip in Highcharts using Handlebars

I have a highcharts graph which has both column and spline graph in it. The data sets are passed using handlebars variables. The code is like this
$(function () {
$('#container').highcharts({
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{xaxisLabel}}}]
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: Highcharts.getOptions().colors[2],
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [{{barSuccess}}]
}, {
type: 'spline',
name: 'Failure',
tooltip: {
valueSuffix: ' %'
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
}]
});
});
Now i have two more data sets called as {{toolTipSuccess}} and {{toolTipFailure}}.
{{toolTipSuccess}} goes in the column chart and {{toolTipFailure}} goes in the spline chart.
I want the data in these two datasets to come as a tooltip in the respective graphs. I know this can be done if i pass the data in the (x,y,z) format in the graph, but i'll have to do a lot of code change to accommodate that which i am avoiding.
Does anyone know any roundabout to this problem?
The data in the variables is of this type:-
{{barSuccess}} = [100, 99, 99, 99 .........]
{{barFailure}} = [ 0, 0, 1, 0.3........]
{{toolTipSuccess}} = [363, 763, 762, 987, ........]
{toolTipFailure}} = [12, 3, 13, 8, .........]
Thanks in advance

You could define your own tooltip formatter and then use the position of the column data point in the input 'bar' data to retrieve and display the appropriate data from toolTipSuccess / toolTipFailure. Consider this snippet of a series.tooltip definition:
//... more series definition
tooltip: {
pointFormatter: function(){
return "Rainfall: " + this.y + ", success: " + successPoints[this.series.data.indexOf( this )] + "<br />";
}
}
//... more code
var successPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
JSfiddle here:
http://jsfiddle.net/L2ncbenx/1/
(Apologies, this is a rough edit of an existing highcharts example)
As you can see, this uses the position of the highlighted point to find the position of the required data in the other dataset.