Home › Forums › Feature Requests & Feedback › Stackedbar chart with more feature › Reply To: Stackedbar chart with more feature
Hi,
I have implemented the graph based on your reply. but still, there are some problems (please check my code)
1. Zoom in and Zoom out is not working 2. Line Marker:- I don’t want the whole line, I need a line like what we marked in image 1 (see image-1, marked as option 1) 3. Can I handle zoom in and zoom out by an event (see image-1, marked as option 2)
Image 1 Url: https://imgur.com/JmtAjHB
This is My working code ————————-
var chart = new CanvasJS.Chart(“chartContainer”, { title: { text: “Machine Operating Time” },
zoomEnabled: true, zoomType: “y”,
axisY: { minimum: (new Date(2016, 0, 25, 17, 30)).getTime(), maximum: (new Date(2016, 0, 27, 17, 30)).getTime(), interval: (12 * 60 * 60 * 1000), labelFormatter: function(e){ return CanvasJS.formatDate(e.value, “DD-MMM h:mm TT”); },
stripLines:[ { value: new Date(2016, 0, 26, 18, 30).getTime(), color:”red”, label:”40258″ } ] },
toolTip:{ contentFormatter: function ( e ) { return “Machine ” + e.entries[0].dataPoint.label + “</br> Start Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”) + “</br> Stop Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”); }},
data: [
{ type: “stackedBar”, dataPoints: [ { label:”A” , y: (new Date(2016, 0, 26, 18, 30).getTime()),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white” }
] }, { type: “stackedBar”, dataPoints: [ { label:”A”, y: new Date(2016, 0, 27, 5, 30).getTime() – new Date(2016, 0, 26, 18, 30).getTime(),indexLabel:”Machine Down”,color:”red”,indexLabelFontColor:”white”}
] },{ type: “stackedBar”, dataPoints: [ { label:”A”, y: new Date(2016, 0, 27, 15, 30).getTime() – new Date(2016, 0, 27, 5, 30).getTime(),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white”}
] }, ] }); chart.render();