Skip to content

Instantly share code, notes, and snippets.

@edwthomas
Created June 8, 2016 00:13
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save edwthomas/b1f653405e2827357133f7e3c245bea0 to your computer and use it in GitHub Desktop.
Save edwthomas/b1f653405e2827357133f7e3c245bea0 to your computer and use it in GitHub Desktop.
Example of using Chart.js with Clojurescript
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[cljsjs.chartjs])
(defn show-revenue-chart
[]
(let [context (.getContext (.getElementById js/document "rev-chartjs") "2d")
chart-data {:type "bar"
:data {:labels ["2012" "2013" "2014" "2015" "2016"]
:datasets [{:data [5 10 15 20 25]
:label "Rev in MM"
:backgroundColor "#90EE90"}
{:data [3 6 9 12 15]
:label "Cost in MM"
:backgroundColor "#F08080"}]}}]
(js/Chart. context (clj->js chart-data))))
(defn rev-chartjs-component
[]
(reagent/create-class
{:component-did-mount #(show-revenue-chart)
:display-name "chartjs-component"
:reagent-render (fn []
[:canvas {:id "rev-chartjs" :width "700" :height "380"}])}))
@philjackson
Copy link

Thanks for this - worked perfectly.

@luposlip
Copy link

Yeah, thanks for the example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment