We Keep Coding

Create chart using one of the given javascript libraries

I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?

You can use C3.js bar charts and hide some of the x-axis but that may require extra JS to do so unless you make the x axis label ' '. If you want all the bars the same colour you'll need to use CSS (unless you declare a pattern). It will not be generated to look identical to that in C3.js without extra manipulation of the code.
You can edit data around on https://c3js.org/samples/chart_bar.html to see how your data would look if you would like to.
You can add
color: {
pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
},
To your generation of the chart with whatever pattern of colours you would like (you can have as many or as few colours as you would like. I just happened to need 4 for my code)
In your case you can do
color: {
pattern: ['#FFA500']
},
In data you can declare an 'x' to have your supplied x labels
data: {
x: 'x',
columns: [your data goes here including x labels],
type: 'bar'
}
I'm not sure about the other libraries but C3.js is essentially a wrapper for D3.js so anything that can be done in one is most likely theoretically possible in both. C3.js is just easier to understand the code for. (see: https://c3js.org/)
Update:
If this wasn't clear enough you can do:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '1',' .','3','. ','. ','6'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
}},
color: {
pattern: ['#FFA500']
},
bar: {
space: 0.05, //sets the gap between the bars
width: {ratio:1}
},
grid: { //the lines (remove if you didn't want grid lines)
y: {
show: true
},
x: {
show: true
}
},
legend: { //hides the legends
show: false
}
});
To do something similar to what you have (you'll need to edit the data to be the exact data you want but that'll be a simple edit on your part)
If you don't want dashed grid lines add:
.c3 .c3-grid line {
stroke-dasharray: 0!important;
stroke: #808080 !important;
}
to your CSS file

I use recharts with React. I think it's the best charting library out there.

Make a bar chart in Chart.js with a legend that reflects the labels in the X-axis

In Charts.js, i am trying to create a bar chart with a single data set and each column being differently coloured.
The desired result would look like this:
However, when i try to create something like this, at best, i get the following
The following code is the chart config object used to initialise the chart:
var config_canvas_alerts = {
type: 'bar',
data: {
datasets: [{
data: [
value0,value1,value2,value3,
],
backgroundColor: [
"#F7464A","#46BFBD","#FDB45C","#949FB1",
],
}],
labels: [
"Move - Match " + value0,
"Move - Unmatch " + value1,
"Permit - Match " + value2,
"Permit - UnMatch" + value3,
]
},
options: {
responsive: true,
legend: {
position: 'right',
onClick: function (e, p) {
alert(p.text);
},
},
title: {
display: true,
text: '#Model.mgt_dash_alert.graph_title',
position: 'top',
fontStyle: 'normal',
fontSize: 14,
padding: 10
}
}
};
I have tried to restructure the data so that each data value becomes its own dataset object with accompanying value, background colour and label but that didnt work out well either.
The only way i was able to achieve this (and hence how i generated the first screenshot) was by dynamically changing the graph from a pie chart to a bar chart after initialisation. The legend seemed to work well.
Changing dynamically from pie to bar chart is not ideal. Any suggestions here?

how to set tooltip content of scatter chart in c3 chart?

I am trying to plot a c3 scatter chart. On mouse hover on tool tip, it shows data set name. Instead i want to display a custom text on that tool tip. My code snippet is below.current image
var chart = c3.generate({
bindto: '#scatter',
data: {
xs: {
positive: 'positive_x',
negative: 'negative_x',
neutral: 'neutral_x'
},
columns: [
$scope.positiveXvalue,
$scope.positiveYvalue,
$scope.negativeXvalue,
$scope.negativeYvalue,
$scope.neutralXvalue,
$scope.neutralYvalue
],
colors: {
positive: '#008000',
negative: '#FF0000',
neutral: '#A9A9A9'
},
type: 'scatter'
},
axis: {
x: {
label: 'Sentiment',
tick: {
fit: false
}
},
y: {
label: 'Followers'
}
});
How to add a custom label on mouse hover(as tool tip)?

You must be looking for tooltip.format.title.
For a scatter plot there is some difference.
Function specified at tooltip.format.title recieve coordinates of hovered data-point. For a traditional line/bar chart it is just integer index.
But for scatter plot it goes in 'x.y' format. So you may have a need to split it:
tooltip: {
format: {
title: function (coord) {
var xy = coord.toString().split('.');
return 'Data at [' + xy[0] + ',' + xy[1] + ']';
}
}
}
Further implementation depends on how your custom titles are stored.

How to add panning to chart in chartjs?

I have created a bar chart with chartjs. I am also using chartjs-plugin-zoom. I have tried several ways but can’t find a way to add panning functionality to chart. Does anyone know how can I add this?
Here is my code:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5...],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2...]
}]
},
options: {
zoom: {
enabled: true,
mode: 'x',
}
}
});

ꜰɪʀꜱᴛ
add hammer.js to your project :
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
ꜱᴇᴄᴏɴᴅ
enable pan option for your chart, like so :
options: {
pan: {
enabled: true,
mode: 'x',
},
...
}
see demo on jsFiddle

Maybe you can use this plugin. See the example.
Basically you need to import and initialize it. By default, if you hold shift and drag the chart, it will pan, but you can also set a custom input trigger.

disabled zooming when scrolling the mouse in the tooltip of scatter plot highcharts

I have a scatter plot highcharts in my page, it renders very well. The problem is when I scroll the mouse within the tooltip area the chart zooming functionality is executing. I need to disabled this one. But I don't want totally to disabled the zooming of the chart since the requirements stated that it needs the chart to zoom in, to look into the dots information when there are overlapping dots. Any help on this please? Or any one has an idea how to find the zoomtype property manually using javascript? I try it to find using firebug but no to avail.
//Code sample
var data = [
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var chartingOptions = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
tooltip: {
useHTML: true,
shared:false,
formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
},
series: [{
type: 'scatter',
name: 'serie',
data: data
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

You can handle the mouseup event on the tooltip element and destroy the zoom selection element in this handler. Highcharts uses this selection element to decide if zooming is needed or not. This will trick highcharts to believe that nothing has been selected.
Code
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});
There may be some side effects to this, like, if you actually were zooming and your zoom selection happened to end on the tooltip, it won't zoom. This may be acceptable, if not you can find a way to workaround that too, by having some more checks in the above handler to see if its actually zooming or something like that.
Demo
Handling mouse events in tooltip | Highchart & Highstock # jsFiddle
//Code sample
var data = [
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var chartingOptions = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
tooltip: {
useHTML: true,
shared:false,
formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
},
series: [{
type: 'scatter',
name: 'serie',
data: data
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});

I solved this one. I just add a mousedown="event.cancelBubble=true" event in the div element and it WORKS!