Develop Reference

How can I set different distance of each points in highchart timeline?

I saw Highchart's timeline chart that customize each point dataLabel.
I want to add dataLabel option to set different distance for each points(data). So I added option like below code.
But when I use this code, it looks like distance option is not working. all of the dataLabel's distance is same.
How can I solve it? Did I use something wrong?
Highcharts.chart('container', {
chart: {
type: 'timeline'
},
series: [{
data: [{
date: 'Some date',
label: 'Event label',
description: 'Description of this event.',
dataLabels: {
color: '#78f',
borderColor: 'blue',
backgroundColor: '#444',
connectorWidth: 2,
connectorColor: 'blue',
distance : 80, // I add this option for different distance
style: {
textOutline: 0
}
}
},{
date: 'Another date',
label: 'Last event label',
description: 'Description of third event.',
dataLabels :{
distance : 20
}
}]
}]
});

Instead of distance that is set for all data labels you can use y property:
series: [{
data: [{
...,
dataLabels: {
y: -50,
...
}
}, {
...,
dataLabels: {
y: 120
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/femo49gn/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.y

Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated

I'm using charts.js.
This is my chart:
I have 3 or more datasets in the same chart, each with a different scale, let's image that all the scales are on the left.
As default when deactivating a dataset (for example in this case clicking on "Sold Products") the scale is rescaled between [-1, +1] as here on multi-axis demo code too.
Is there a way in which I can make disappear the dataset's scale when that dataset is deactivated?
For example in this case if I deactivate "Sold Products", I would like to make the scale in the middle to disappear.
When I reactivate the "Sold Product" then I would like the scale to reappear.

This can be done using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.
You could use the beforeLayout hook as shown below. The function iterates over the datasets and sets the yAxes.display option depending whether the corresponding dataset is hidden or not.
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
Please have a look at the following runnable code snippet to see how it works.
new Chart('chart', {
type: 'line',
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Dataset 1',
yAxisID: 'yAxis-1',
data: [100, 96, 84, 76, 69],
borderColor: 'red',
fill: false
},
{
label: 'Dataset 2',
yAxisID: 'yAxis-2',
data: [9, 6, 8, 7, 6],
borderColor: 'blue',
fill: false
},
{
label: 'Dataset 3',
yAxisID: 'yAxis-3',
data: [0.3, 0.5, 0.8, 0.4, 0.5],
borderColor: 'green',
fill: false
}
]
},
options: {
scales: {
yAxes: [{
id: 'yAxis-1',
type: 'linear',
position: 'left',
},
{
id: 'yAxis-2',
type: 'linear',
position: 'left'
},
{
id: 'yAxis-3',
type: 'linear',
position: 'left'
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>

How to make pie slices in chartjs clickable (react-native)

I am working with a library that makes chartjs usable on react-native:
react-native-chartjs.
The chart works well, but when I press on the pie slices I only get the tooltip.
What I would like to, is to create my own function that will load a pop-up window instead of the tooltip provided by chart.js
How would you guys do it? Is it even doable? (I am pretty new to react-native, so sorry if it's a stupid question).
Image of the:
Chart
Chart code:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy']‚
datasets: [
{
label: '# of Votes',
data: [ 50, 140, 90, 120 ],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};

Chart.js v2 - combined stacked bar chart and 2 unstacked lines

Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});

Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.

Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />

Disable tooltip in CanvasJS Combination Chart

Is it possible to disable tooltips for only one series in a combination chart of canvasjs below?
data: [
{
type: "area",
color: "red", // change color here
fillOpacity: 1,
dataPoints: [
{ x: 0, y: 100 },
{ x: 100, y: 100 }
]
},
{
type: "area",
color: "yellow",
toolTipContent: " ",
dataPoints: [
{ x: 0, y: 10 },
{ x: 100, y: 100 }
]
}
]
Here is the link to my fiddle :
https://jsfiddle.net/Abhishek1191/s71djz9m/2
I have four separate series plotted inside the fiddle. 3 Area and 1 line. If anyone may let me know if I can disable tooltips for area series.
Thanks in advance

Instead of setting toolTipContent to empty string, set toolTipContent to null which will disable the toolTip for individual dataPoint / dataSeries. In your jsfiddle you are using v1.4.1 which does not support this feature. Please download the latest version. Here is the working code .
var chart = new CanvasJS.Chart("container",
{
data: [
{
toolTipContent: null,
type: "column",
dataPoints:[
{ x: 10, y: 20}
]
}
]
});
chart.render();