HTML5 & JS Column Charts

Có thể bạn quan tâm

Home
docs
charts
chart types
Column Chart

Download Free Code Samples

JavaScript Chart Samples
React Chart Samples
Angular Chart Samples
Vue.js Chart Samples
jQuery Chart Samples
PHP Chart Samples
Python Django Chart Samples
ASP.NET Chart Code Samples
JSP Chart Samples
Spring MVC Chart Samples
Dashboard Samples
JavaScript StockChart Samples

Docs Menu

Include StockChart

charts
- introduction
  - installation
  - features
  - performance
  - requirements
  - support
- getting started
  - Chart Elements
  - Updating Chart Options / Data
  - Title
  - Working With Data
  - Multi Series Charts
  - Combination Charts
  - Stacked Charts
  - Axis Element
  - Labels & Index Labels
  - Tick Marks, Grid Lines and Interlaced Colors
  - Legend
  - Markers
  - Date & Time Axis
  - ToolTip
  - Zooming & Panning
  - Event Handling
  - Formatting Numbers
  - Formatting Date & Time
  - HTML5 Color Coding
  - Empty / Null Data Points in Chart
- chart types
  - Column Chart
  - Line Chart
  - Step Line Chart
  - Step Area Charts
  - Spline Chart
  - Area Chart
  - Spline Area Chart
  - Bar Chart
  - Pie Chart
  - Doughnut Chart
  - Bubble Chart
  - Funnel Chart
  - Pyramid Chart
  - Scatter Chart
  - Stacked Column
  - Stacked Column 100
  - Stacked Area
  - Waterfall chart
  - Stacked Area 100
  - Stacked Bar
  - Stacked Bar 100
  - Range Column Chart
  - Range Bar Chart
  - Range Area Chart
  - Range Spline Area Chart
  - OHLC Chart
  - Candlestick Chart
  - Error Chart
  - Box and Whisker Chart
- chart options (reference)
  - interactivityEnabled
  - animationDuration
  - animationEnabled
  - exportFileName
  - exportEnabled
  - zoomEnabled
  - zoomType
  - theme
  - backgroundColor
  - colorSet
  - culture
  - rangeChanging
  - rangeChanged
  - width
  - height
  - dataPointMaxWidth
  - dataPointMinWidth
  - dataPointWidth
  - subtitles
  - toolbar
    - itemBackgroundColor
    - itemBackgroundColorOnHover
    - buttonBorderColor
    - buttonBorderThickness
    - fontColor
    - fontColorOnHover
  - title
    - text
    - wrap
    - textAlign
    - maxWidth
    - dockInsidePlotArea
    - verticalAlign
    - horizontalAlign
    - fontSize
    - fontFamily
    - fontWeight
    - fontColor
    - fontStyle
    - borderThickness
    - cornerRadius
    - borderColor
    - backgroundColor
    - margin
    - padding
  - axisX
    - title
    - titleWrap
    - titleMaxWidth
    - titleTextAlign
    - titleBackgroundColor
    - titleBorderColor
    - titleBorderThickness
    - titlePadding
    - titleFontColor
    - titleFontSize
    - titleFontFamily
    - titleFontWeight
    - titleFontStyle
    - margin
    - labelBackgroundColor
    - labelBorderColor
    - labelMaxWidth
    - labelBorderThickness
    - labelWrap
    - labelAutoFit
    - labelPadding
    - labelAngle
    - labelFontFamily
    - labelFontColor
    - labelFontSize
    - labelFontWeight
    - labelFormatter
    - labelFontStyle
    - prefix
    - labelTextAlign
    - suffix
    - valueFormatString
    - minimum
    - maximum
    - viewportMaximum
    - viewportMinimum
    - interval
    - intervalType
    - reversed
    - logarithmic
    - logarithmBase
    - tickLength
    - tickColor
    - tickThickness
    - lineColor
    - lineThickness
    - lineDashType
    - gridDashType
    - interlacedColor
    - gridThickness
    - tickPlacement
    - labelPlacement
    - gridColor
    - stripLines
      - value
      - showOnTop
      - lineDashType
      - opacity
      - labelFormatter
      - startValue
      - endValue
      - thickness
      - color
      - label
      - labelPlacement
      - labelAlign
      - labelBackgroundColor
      - labelWrap
      - labelBorderColor
      - labelMaxWidth
      - labelBorderThickness
      - labelTextAlign
      - labelPadding
      - labelFontFamily
      - labelFontColor
      - labelFontSize
      - labelFontWeight
      - labelFontStyle
      - tickLength
      - tickColor
      - tickThickness
    - crosshair
      - enabled
      - snapToDataPoint
      - color
      - opacity
      - thickness
      - lineDashType
      - valueFormatString
      - label
      - labelWrap
      - labelMaxWidth
      - labelTextAlign
      - labelBackgroundColor
      - labelFontFamily
      - labelBorderColor
      - labelFontColor
      - labelBorderThickness
      - labelPadding
      - labelFontSize
      - labelFontWeight
      - labelFontStyle
      - labelFormatter
      - updated
      - hidden
    - scaleBreaks
      - autoCalculate
      - maxNumberOfAutoBreaks
      - collapsibleThreshold
      - spacing
      - type
      - fillOpacity
      - color
      - lineColor
      - lineThickness
      - lineDashType
      - customBreaks
        startValue
        endValue
        spacing
        type
        fillOpacity
        color
        lineColor
        lineThickness
        lineDashType
  - axisY
    - title
    - titleMaxWidth
    - titleWrap
    - titleTextAlign
    - titleFontColor
    - titleFontSize
    - titleFontFamily
    - titleFontWeight
    - titleFontStyle
    - margin
    - titleBackgroundColor
    - titleBorderColor
    - labelBackgroundColor
    - titleBorderThickness
    - titlePadding
    - labelFormatter
    - labelMaxWidth
    - labelWrap
    - labelAutoFit
    - labelBorderColor
    - labelBorderThickness
    - labelAngle
    - labelPadding
    - labelFontFamily
    - labelFontColor
    - labelFontSize
    - labelFontWeight
    - labelFontStyle
    - prefix
    - labelTextAlign
    - suffix
    - valueFormatString
    - minimum
    - maximum
    - interval
    - reversed
    - logarithmic
    - logarithmBase
    - viewportMinimum
    - viewportMaximum
    - tickLength
    - tickColor
    - tickThickness
    - lineColor
    - lineThickness
    - lineDashType
    - gridDashType
    - interlacedColor
    - gridThickness
    - gridColor
    - includeZero
    - tickPlacement
    - labelPlacement
    - stripLines
      - value
      - startValue
      - endValue
      - showOnTop
      - opacity
      - labelFormatter
      - lineDashType
      - thickness
      - color
      - label
      - labelPlacement
      - labelAlign
      - labelBackgroundColor
      - labelWrap
      - labelBorderColor
      - labelMaxWidth
      - labelBorderThickness
      - labelPadding
      - labelTextAlign
      - labelFontFamily
      - labelFontColor
      - labelFontSize
      - labelFontWeight
      - labelFontStyle
      - tickLength
      - tickColor
      - tickThickness
    - crosshair
      - enabled
      - snapToDataPoint
      - color
      - opacity
      - thickness
      - lineDashType
      - valueFormatString
      - label
      - labelWrap
      - labelTextAlign
      - labelMaxWidth
      - labelBackgroundColor
      - labelBorderColor
      - labelFontFamily
      - labelBorderThickness
      - labelFontColor
      - labelFontSize
      - labelPadding
      - labelFontWeight
      - labelFontStyle
      - labelFormatter
      - updated
      - hidden
    - scaleBreaks
      - autoCalculate
      - collapsibleThreshold
      - maxNumberOfAutoBreaks
      - spacing
      - type
      - fillOpacity
      - color
      - lineColor
      - lineThickness
      - lineDashType
      - customBreaks
        startValue
        endValue
        spacing
        type
        fillOpacity
        color
        lineColor
        lineThickness
        lineDashType
  - axisX2
  - axisY2
  - data
    - name
    - cursor
    - visible
    - type
    - axisXType
    - axisYType
    - axisXIndex
    - axisYIndex
    - xValueType
    - yValueFormatString
    - zValueFormatString
    - percentFormatString
    - xValueFormatString
    - highlightEnabled
    - connectNullData
    - lineDashType
    - nullDataLineDashType
    - indexLabelLineDashType
    - indexLabelFormatter
    - color
    - lineColor
    - bevelEnabled
    - fillOpacity
    - startAngle
    - radius
    - innerRadius
    - indexLabel
    - indexLabelPlacement
    - indexLabelMaxWidth
    - indexLabelWrap
    - indexLabelTextAlign
    - indexLabelOrientation
    - indexLabelBackgroundColor
    - neckWidth
    - indexLabelFontStyle
    - neckHeight
    - indexLabelBorderColor
    - indexLabelBorderThickness
    - reversed
    - valueRepresents
    - indexLabelPadding
    - upperBoxColor
    - lowerBoxColor
    - indexLabelFontColor
    - whiskerLength
    - whiskerColor
    - whiskerThickness
    - indexLabelFontSize
    - whiskerDashType
    - indexLabelFontFamily
    - stemColor
    - indexLabelFontWeight
    - stemThickness
    - indexLabelLineColor
    - indexLabelLineThickness
    - stemDashType
    - linkedDataSeriesIndex
    - toolTipContent
    - lineThickness
    - markerType
    - markerColor
    - markerSize
    - markerBorderColor
    - markerBorderThickness
    - showInLegend
    - legendText
    - legendMarkerBorderColor
    - legendMarkerBorderThickness
    - legendMarkerType
    - explodeOnClick
    - click
    - legendMarkerColor
    - mouseover
    - mousemove
    - mouseout
    - risingColor
    - dataPoints
      - x
      - y
      - z
      - name
      - isIntermediateSum
      - isCumulativeSum
      - cursor
      - label
      - highlightEnabled
      - indexLabelLineDashType
      - indexLabelFormatter
      - indexLabel
      - indexLabelPlacement
      - indexLabelOrientation
      - indexLabelBackgroundColor
      - indexLabelBorderColor
      - indexLabelFontColor
      - indexLabelBorderThickness
      - indexLabelWrap
      - indexLabelPadding
      - indexLabelMaxWidth
      - indexLabelTextAlign
      - indexLabelFontSize
      - indexLabelFontStyle
      - indexLabelFontFamily
      - indexLabelFontWeight
      - indexLabelLineColor
      - indexLabelLineThickness
      - toolTipContent
      - exploded
      - color
      - lineColor
      - lineDashType
      - showInLegend
      - legendText
      - legendMarkerType
      - legendMarkerColor
      - legendMarkerBorderColor
      - legendMarkerBorderThickness
      - markerType
      - markerColor
      - markerSize
      - markerBorderColor
      - markerBorderThickness
      - click
      - mouseover
      - mousemove
      - mouseout
    - fallingColor
  - toolTip
    - enabled
    - fontColor
    - fontStyle
    - fontSize
    - fontFamily
    - fontWeight
    - borderThickness
    - cornerRadius
    - reversed
    - contentFormatter
    - backgroundColor
    - shared
    - content
    - animationEnabled
    - borderColor
    - updated
    - hidden
  - legend
    - cursor
    - reversed
    - maxWidth
    - maxHeight
    - itemWrap
    - itemMaxWidth
    - itemWidth
    - itemTextAlign
    - itemTextFormatter
    - markerMargin
    - dockInsidePlotArea
    - fontSize
    - fontFamily
    - fontColor
    - fontWeight
    - fontStyle
    - verticalAlign
    - horizontalAlign
    - itemmouseover
    - itemmousemove
    - itemmouseout
    - itemclick
- methods & properties
  - CanvasJS
    - formatNumber()
    - formatDate()
  - Chart
    - get()
    - set()
    - addTo()
    - render()
    - exportChart()
    - print()
    - destroy()
  - Title
    - get()
    - set()
    - remove()
  - Subtitle
    - get()
    - set()
    - remove()
  - Legend
    - get()
    - set()
  - ToolTip
    - get()
    - set()
    - showAtX()
    - hide()
  - Axis
    - get()
    - set()
    - addTo()
    - remove()
    - convertValueToPixel()
    - convertPixelToValue()
  - StripLine
    - get()
    - set()
    - remove()
  - DataSeries
    - get()
    - set()
    - addTo()
    - remove()
  - Crosshair
    - showAt()
    - hide()
    - get()
    - set()
  - Toolbar
    - get()
    - set()
- how to samples
  - Creating Dynamic Charts
  - Multiple Y Axis
  - Hide Unhide Data Series on Legend Click
  - Sync Zooming and Panning across Charts
  - Render Chart from User Input
  - Render Multiple Charts in a Page
  - JavaScript Charts from JSON API using AJAX
  - Creating Charts from XML
  - Creating Charts from CSV
  - Live Updating Charts from JSON API & AJAX
  - Position Image Over Chart
  - Make dataPoints on Chart Draggable
- integration
  - jQuery
    - chart types
      - Column Chart
      - Line Chart
      - Step Line Chart
      - Spline Chart
      - Step Area Chart
      - Area Chart
      - Spline Area Chart
      - Bar Chart
      - Pie Chart
      - Doughnut Chart
      - Bubble Chart
      - Scatter Chart
      - Stacked Column Chart
      - Stacked Column 100 Chart
      - Stacked Area Chart
      - Stacked Area 100 Chart
      - Stacked Bar Chart
      - Stacked Bar 100 Chart
      - Range Column Chart
      - Range Bar Chart
      - Range Area Chart
      - Range Spline Area Chart
      - OHLC Chart
      - Candlestick Chart
  - ASP.NET MVC
    - chart types
      - Column Chart
      - Line Chart
      - Area Chart
      - Pie Chart
      - Doughnut Chart
      - Step Line Chart
      - Spline Chart
      - Bar Chart
      - Step Area Chart
      - Spline Area Chart
      - Scatter Chart
      - Bubble Chart
      - Stacked Column Chart
      - Stacked Column 100 Chart
      - Stacked Bar Chart
      - Stacked Bar 100 Chart
      - Stacked Area Chart
      - Stacked Area 100 Chart
    - how to samples
      - Create Dynamic Charts
      - Updating Live Chart from external JSON
      - Sync Zooming and Panning across Multiple Charts
      - Creating Charts from External JSON Data API
      - Creating Charts from CSV
      - Creating Charts from XML
      - Render Data from Database
  - React
  - Angular
  - Vue
stockcharts
- introduction
  - installation
  - features
  - requirements
  - Support
- getting started
  - StockChart Elements
  - Updating StockChart Options / Data
  - Title
  - Charts
  - Tooltip
  - Crosshair
  - RangeSelector
  - Navigator
  - Asynchronous Loading of Datapoints
- stockchart options
  - animationEnabled
  - animationDuration
  - exportEnabled
  - exportFileName
  - colorSet
  - theme
  - backgroundColor
  - culture
  - width
  - height
  - rangeChanging
  - rangeChanged
  - title
  - subtitles
  - toolbar
  - charts
  - navigator
    - enabled
    - width
    - height
    - verticalAlign
    - animationEnabled
    - animationDuration
    - theme
    - backgroundColor
    - colorSet
    - dynamicUpdate
    - slider
      - maskColor
      - maskOpacity
      - maskInverted
      - handleColor
      - handleBorderColor
      - handleBorderThickness
      - handleWidth
      - handleHeight
      - minimum
      - maximum
      - outlineColor
      - outlineThickness
      - outlineInverted
    - axisX
    - axisY
    - data
  - rangeSelector
    - enabled
    - width
    - height
    - verticalAlign
    - label
    - selectedRangeButtonIndex
    - buttons
      - label
      - range
      - rangeType
    - buttonStyle
      - backgroundColor
      - backgroundColorOnHover
      - backgroundColorOnSelect
      - borderColor
      - borderThickness
      - labelFontColor
      - labelFontColorOnHover
      - labelFontSize
      - labelFontStyle
      - labelFontFamily
      - labelFontWeight
      - width
      - labelTextAlign
      - maxWidth
      - padding
      - spacing
      - cursor
    - inputFields
      - enabled
      - startValue
      - endValue
      - valueType
      - valueFormatString
      - style
        backgroundColor
        borderColor
        borderColorOnFocus
        borderThickness
        fontColor
        fontSize
        fontStyle
        fontFamily
        fontWeight
        width
        maxWidth
        padding
        textAlign
        cursor
- methods & properties
  - CanvasJS
  - StockChart
    - get()
    - set()
    - addTo()
    - render()
    - exportChart()
    - print()
    - destroy()
  - Title
  - Subtitle
  - Charts
  - Navigator
    - get()
    - set()
    - addTo()
  - Slider
    - get()
    - set()
  - RangeSelector
    - get()
    - set()
  - Buttons
    - get()
    - set()
  - InputFields
    - get()
    - set()
  - ButtonStyle
    - get()
    - set()
  - Style
    - get()
    - set()
  - Toolbar
- integration
  - jQuery
  - ASP.NET MVC
  - React
  - Angular
  - Vue

HTML5 & JS Column Charts

Column charts are rectangular bars with lengths proportional to the values that they represent. A column chart is useful to compare dataPoints in one or more dataSeries.

In column charts, axisX is the horizontal Axis and axisY is the vertical Axis.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Column Chart Specific Properties

Applies To	Attribute	Type	Default	Options/Examples
dataSeries	bevelEnabled	Boolean	false	true,false
dataSeries/ dataPoint	indexLabelPlacement	String	“outside”	“inside”,”outside”
dataSeries/ dataPoint	indexLabelOrientation	String	“horizontal”	“horizontal”,”vertical”
dataSeries	fillOpacity	Number	1	.2,.4,1 etc

Basic Column Chart

Try Editing The Code

Column Chart With Additional Customization

Try Editing The Code Integrations:

Angular Column Charts
React Column Chart
Vue.js Column Chart
jQuery Column Chart
PHP Column Chart
Python Column Chart
ASP.NET MVC Column Chart

Also See:

dataPointMaxWidth
Stacked Column Chart
Stacked Column 100 Chart
Bar Chart

If you have any questions, please feel free to ask in our forums.Ask Question

79 Comments

Mervin says: July 12, 2013 at 11:52 am
help me
Mervin says: July 12, 2013 at 11:56 am
hi sir. this coding doesn’t work. bcoz need ‘canvasjs.min.js’ file plz give me
- Sunil Urs says: July 12, 2013 at 12:09 pm
  Mervin,
  
  Please download it from the download page…
Joe Mainwaring (@theaccordance) says: July 16, 2013 at 11:50 pm
Is it possible to define the width of the columns?
- Sunil Urs says: July 17, 2013 at 3:00 pm
  Joe, as of now it is not possible to define width of columns
MadhanKumar says: August 2, 2013 at 11:55 am
hi Sunil, Can u tell me how to increase the X-Axis limit….?
MadhanKumar says: August 2, 2013 at 12:06 pm
axisX:{ internalMaximum: 1500 }, I tried using this to increase the X-Axis limit but it is not working can u guide me in it….
- Sunil Urs says: August 2, 2013 at 12:48 pm
  Please use maximum and minimun properties
- MadhanKumar says: August 2, 2013 at 3:22 pm
  Thanks Sunil….
hoon says: September 24, 2013 at 2:46 am
to make column charts attached to negative values add this code to canvasjs

under : Chart.prototype.renderColumn

…

if (dataSeries._options.minimumBound = 0), (dataPoints[i].y < 0) && bevelEnabled, false, false);

…

and make options like this axisY : { minimum : -130, maximum : 0 }, data : [{ type: 'column', minimumBound : -130, …
Bowo says: October 31, 2013 at 6:23 pm
Can you make the color uniform except for one of the columns?
- Sunil Urs says: November 1, 2013 at 12:17 pm
  Yes. You need to first set color property of dataSeries – which gets applied all dataPoints. Then you can override the same in one or more dataPoint(s) by setting their color property.
  
  https://canvasjs.com/docs/charts/chart-options/data/datapoints/color/
nag says: December 20, 2013 at 5:58 pm
sir,why these charts code is not working in other editors like Google Code playground,JS Fiddle etc
Yuk Liu says: February 18, 2014 at 7:56 pm
I’m almost sold on canvas.js because it appeals to me visually. Are there plans to include the option to add error bars on the columns? I know this feature is also not available in most other charting js libraries but this is important for academic visual presentations.
Kim says: March 10, 2014 at 1:43 am
Hi, thank you for great work.

On the doughnut chart i can use php string inside the y axis like this (y: “” label: “test”).

But in many of the others charts and the column chart this does not work.

Is there a workaround in the js file or something?
kaushal says: August 6, 2014 at 1:06 pm
Hi, can you please help me in my below query? how to set margin between 2 bars(column) or reduce size of bar ?
kaushal patel says: August 12, 2014 at 10:45 am
HI i am facing issue in setting up this canvas in jquery mobile Popup. can you help hence the graph is going out of this box(popup box).

or you can suggest any best supportive js. Thanks in Advance
- Sunil Urs says: August 12, 2014 at 11:37 pm
  Kaushal,
  
  Please refer to this post.
Amit says: September 2, 2014 at 12:15 pm
Hi Sunil, Is is possible with canvasjs to plot a (column) chart with all values and also the labels hidden? And can we override the styling of the canvas element (position:absolute doesn’t let me add it to the hero-unit in twitter-bootstrap 2)
Amit says: September 2, 2014 at 1:38 pm
It worked with the twitter bootstrap (height was missing in the main div, my fault :P) So now the only question is can i hide values and labels (on x and/or y axis)?

Thanks
- Sunil Urs says: September 2, 2014 at 1:46 pm
  Yes. Here is an example.
  - Amit says: September 2, 2014 at 4:18 pm
    Perfect..!! Thanks.
Raju says: December 3, 2014 at 6:41 pm
hi,sunil how to use thi bar chart in my visual force page ?
amar says: December 8, 2014 at 10:41 pm
could u please tell me how to reduce the width of bar in column bar chart
Hareesh Mohan says: December 20, 2014 at 6:17 pm
I want to place 2 graphs one by one with different values . but it shows only one graph or the latest graph. Why ? Can i show 2 graph in same page?
- Anjali says: December 22, 2014 at 6:08 pm
  Hareesh,
  
  For doing the same please refer this example.
Sammi says: January 16, 2015 at 11:17 pm
Is there a way to get custom color for each column?
- Anjali says: January 23, 2015 at 6:51 pm
  Sammi,
  
  You can do the same by using color property of dataPoints or by using colorSet property of chart.
sand says: February 18, 2015 at 1:38 am
how to display the names vertically instead of horizontal. becasue when i check this chart in mobile view if the names are lenghty i wont displaying correctly. please advice ? any fixes for mobile reponsive .
- Anjali says: February 19, 2015 at 8:39 pm
  sand,
  
  If you meant axis label, you can do the same by setting labelAngle.
mobiq says: February 26, 2015 at 1:50 pm
Hi,

I have tried using canvas.min.js – and have couple of queries

1) can I fix column widths? 2) I want to add an additional ‘average’ line to chart to show comparison against columns. How can add this line?

thanks
- Anjali says: February 26, 2015 at 3:47 pm
  mobiq,
  
  1) Sorry, it is not possible to set fixed width of column because when the number of dataPoints increase, we cannot fit/display all of them without reducing their width.
  
  2) Automatically, it is not possible. As a workaround you can calculate the averages and add it to the chart.
mobiq says: February 26, 2015 at 4:24 pm
Anjali, Thanks for your prompt response.

for point 1) Have you put any implicit restriction on no. of columns as if give more than 10 data points I don’t see more 8 columns. 2) Could please post a small example of how to achieve this?

Thanks
- Anjali says: March 3, 2015 at 7:29 pm
  1. There are not limits on the number of columns. Please checkout this jsfiddle. 2. Please refer to this example.
mobiq says: March 4, 2015 at 7:25 pm
Thanks Anjali. I was able to solve (2) by simple adding more data points.

chart = new CanvasJS.Chart(id, { title : { text : “Usage history”, fontSize: 25, fontColor: “black”, }, axisY : { title : “Usage” }, axisX : { title : “Time” }, legend : { verticalAlign : “bottom”, horizontalAlign : “center” }, data : [ { dataPoints : dps }, { dataPoints : dpsAvg } ] });

chart.render()
kapil says: March 12, 2015 at 11:38 am
Hi Is there a way to get legendMarkerType checkbok.
- Anjali says: March 12, 2015 at 7:17 pm
  Checkbox is not available as a legend marker type.
Tulasiram G says: March 23, 2015 at 1:53 pm
I want to give individual colors to individual bars…How???plz Help
- Anjali says: March 23, 2015 at 5:00 pm
  Tulasiram,
  
  Please use the color property of dataPoints for the same.
giggy says: April 29, 2015 at 6:40 am
i want print Graph in IE. It move in x-axis ,y-axis but i want print graph in x-axis ,y-axis
Hitesh says: May 7, 2015 at 2:46 pm
Hi, Is it possible to give indexLabel inside the column-chart with having it’s percentage?
- Anjali says: May 8, 2015 at 4:59 pm
  hitesh,
  
  You can do so by setting indexLabelPlacement property to “inside”. But you will have to calculate percentage values yourself except for when it is a stacked chart or a pie / doughnut chart where you can use #percent keyword.
Matthijs says: August 21, 2015 at 5:02 pm
Is there a way to break the y-as values? I have very high and low values (5 to 10k). I would love to have a bar graph that goes from 0 to 100 and then 2500 – 10000. Because now the low values are hardly to see / interact with.

Is that possible?
- Matthijs says: August 21, 2015 at 5:05 pm
  ^ Column chart instead of Bar chart
- Naveen Venugopal says: August 26, 2015 at 6:14 pm
  As of now there is no way to break an axis. But you can try rendering charts against multiple axis in order to increase readability.
  - Matthijs says: August 26, 2015 at 6:21 pm
    Thanks for the reply. Too bad it isn’t possible. The multiple axis solution is not really the option my client is looking for.
Ram says: August 25, 2015 at 11:46 am
how i can add new column in column bar chart.I required 2 to 5 column in a chart for different data showing. plz reply me how it is possible. thanxs
- Naveen Venugopal says: August 26, 2015 at 6:10 pm
  You can refer to this section on creating multi-series charts. In case you meant adding dataSeries dynamically, please refer to this example.
Thrilok says: August 26, 2015 at 7:19 pm
Hi How can i fix the width for bar charts for varying the haxis values
- Naveen Venugopal says: August 26, 2015 at 7:57 pm
  You can control the Column/Bar width by using dataPointMaxWidth.
Artyom says: October 12, 2015 at 1:54 am
Is it possible to make columns with rounded corners?
- Naveen Venugopal says: October 20, 2015 at 11:03 am
  Sorry, this feature is not available yet.
Grégoire says: November 2, 2015 at 4:18 pm
Hey!

I would know if it’s possible to export this type of graph into a PDF file?

Thanks!
- Naveen Venugopal says: November 2, 2015 at 6:02 pm
  We don’t have this option built into the chart. But with couple of lines of code you can do the same by using jsPDF. Here is an example.
  - Grégoire says: November 2, 2015 at 8:06 pm
    Thanks!!
Naresh says: November 15, 2015 at 9:45 am
Is it possible to provide custom colors for columns?
- Naveen Venugopal says: November 17, 2015 at 11:08 am
  Yes, you can do the same using color properties at dataSeries and dataPoint. And also please refer color coding for ways of setting color.
Sreekanth says: November 20, 2015 at 1:19 pm
Is It possible to show the some line if data is zero on y axis?
- Rishabh Rajgarhia says: November 23, 2015 at 1:20 pm
  Sreekanth,
  
  Can you please explain the issue further in detail. A pictorial representation would be very helpful.
info2scs says: December 4, 2015 at 10:12 pm
Hi, I’am trying an example where I have to place 2 column chart side by side (inside its own divs container). The charts are being rendered properly.

I have following questions 1. When I mouse hover on of the left side chart’s column, the tool tip is being rendered correctly. However when I mouse hover the column on the ride side chart, the tool tip is rendered near the left side column chart. I was wondering if there is any example of rendering 2 column charts side by side? 2. What is the option do i need to use (in column chart) to place the value of the column at the top of the column.

Thanks
- Rishabh Rajgarhia says: December 7, 2015 at 11:48 am
  Hi, For questions: 1. Can you please create a jsfiddle example so that we may look into the issue and provide you with a solution. 2. You can use index labels to place the values at the top of the columns.
Vinsly bright says: December 28, 2015 at 6:10 pm
Is it possible to have small image on top of every column in column graph?
- Sunil Urs says: December 28, 2015 at 6:16 pm
  As of now images are not supported inside the chart.
Ali says: January 18, 2016 at 3:23 pm
I need To display the Account related all contacts display in Y- axis and Date of Month display in X-axis Using Visual force page and Controller.
Ali says: January 18, 2016 at 3:36 pm
follow above requirement is, can u please display the X-axis Display date of month how many Contacts are logged in a Day. Example today I,m logged in One Contact Based on Account, Using Bar-chart displaying y-axis upto 1 contact and Xaxis Dispaly Today Date….
- Sanjoy says: January 19, 2016 at 12:47 pm
  Are you looking for a Bar Chart with DateTime Axis??
ed van der velden says: January 31, 2016 at 4:43 am
Reading & learing about CanvasJS for a personal project at home i used and modified the basic column chart to mu needs and looks great. I put in some static data to make is show what i need. The thing is that i have a csv file that is updated every 5 minutes, and i want to have that data show in the chart. my csv file has only 1 row of data with 7 data fields in it “16/01/31,17.401,0,0,0,7.192,0” My script looks like this:

window.onload = function () { var chart = new CanvasJS.Chart(“chartContainer”, { title:{ text: “Dagverbruik voorbeeld” }, data: [ { // Change type to “doughnut”, “line”, “splineArea”, etc. type: “column”, dataPoints: [ { label: “Dal gebr.”, y: 6.709 }, { label: “Piek gebr.”, y: 12.128 }, { label: “Dal gelev.”, y: 0 }, { label: “Piek gelev.”, y: 4.400 }, { label: “Gas verb.”, y: 8.051 }, { label: “Prod. Kwh”, y: 0 } ] } ] }); chart.render(); }

Please advice how to get that CSV data into the chart? any help is appreciated

cheers Eddy
Mark says: February 6, 2016 at 3:29 am
Hi

Is there a way to set the width of the columns in the chart?

I really wanna make ’em thinner while maintaining current width.
- Sunil Urs says: February 6, 2016 at 2:43 pm
  You can use dataPointMaxWidth, dataPointMinWidth & dataPointWidth properties.
mahendra says: March 5, 2016 at 4:01 pm
It is not working with asp.net(VB 2005), Nothing is displaying, works fine with .html format. why?
Vernon says: April 30, 2016 at 12:56 pm
Hmm it seems like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well amm an aspiring blog writer but I’m still new to the whole thing. Do you hae any suggyestions for beginner blog writers? I’d really appreciate it.
Ravichandra says: May 13, 2016 at 12:14 pm
sir, I want a canvas semidougnut chart with click event,can i make this chart in canvas please help me.
- Sanjoy says: May 13, 2016 at 12:30 pm
  Ravichandra,
  
  Here is a workaround to create a semi-doughnut chart with CanvasJS.
Kylin says: May 17, 2016 at 4:09 pm
How I show the axisY’s number in the chart?like this http://7xi72v.com1.z0.glb.clouddn.com/16-5-17/65319122.jpg
- Sanjoy says: May 17, 2016 at 4:32 pm
  Are you looking for indexLabel with keyword as “{y}”.
Awais says: May 18, 2016 at 11:15 am
How can make border around the columns?
- Sanjoy says: May 18, 2016 at 12:02 pm
  Awais,
  
  As of now CanvasJS doesn’t support border for column.But you can check bevelEnabled.
  - Prasanna wagh says: July 7, 2016 at 12:09 pm
    hi, Is there any scope in future to give border to each column?
gsm phones says: June 1, 2016 at 9:16 pm
Fantastic site. Lots of helpful nfo here. I’m sending it to some pals ans also sharing in delicious. And certainly, hanks on your sweat!

If you have any questions, please feel free to ask in our forums. Ask Question